小程序请求回来的数据太多该怎么渲染？

Question

小程序请求回来的数据太多该怎么渲染？

ywqs

3111828

发布于
2018-11-19

更新于
2018-11-19

我在写小程序的滚动底部加载更多的时候如果加载很多条数据页面渲染就会报错

这是请求数据但是数据一超过100条之后就报错了我看别人的都没有问题真是很郁闷
success(res) {

      console.log(res)
      wx.hideLoading()
      var list = self.data.list
      if (JSON.stringify(res.data.data) === '{}') {
      } else {
        var after_id = res.data.data[res.data.data.length - 1].news_id
        wx.setStorageSync('after_id', after_id)
        res.data.data.forEach(function (e) {
          if (JSON.stringify(e.news_images) !== '{}') {
            e.news_images.attachment_content = (JSON.parse(e.news_images.attachment_content)).slice(0, 3)
          }
          e.published_time = utils.getTimeShow(
            utils.edittime(e.published_time)
          );
          list.push(e)
        }) 
        setTimeout(function(){
          self.setData({
            list: list,
          })
        },100)
        console.log(self.data.list)
        wx.hideLoading()
      }
    }

这是我的页面渲染

<swiper-item wx:for="{{newlist}}" wx:key="*this" wx:for-index="index" >


  <scroll-view scroll-y="true" bindscrolltolower="bindDownLoad"   class="scoll-h" wx:if='{{show}}'>
    <swiper class='banner' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" duration="{{duration}}" previous-margin="0px" next-margin="0px">
      <block wx:for="{{imgUrls}}" wx:key="*this">
        <swiper-item bindtap="goinfo" data-url="{{item.url}}" class='bannercontent'>
            <image src="{{item.image}}" class="slide-image" />
            <view class='title'>{{item.title}}</view>
        </swiper-item>
      </block>
    </swiper>
    <view wx:for="{{essencefour}}" wx:key="*this" class='newscontent'>
      <view wx:if='{{item.news_type==0}}' class='content' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='newstitle'>{{item.news_title}}</view>
        <view class='bom'>
          <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
          <view>{{item.view_num}}
            <image class='viewnum' src='../../img/count.png'></image>
          </view>
        </view>
      </view>
      <view wx:if='{{item.news_type==1}}' class='content oneimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-bom'>
          <view class='oneimg-title'>{{item.news_title}}</view>
          <view class='oneimg-bom-bom'>
            <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
            <view>{{item.view_num}}
              <image class='viewnum' src='../../img/count.png'></image>
            </view>
          </view>
        </view>
        <image class='newscover' src="{{item.cover}}"></image>
      </view>
      <view wx:if='{{item.news_type==2}}' class='content moreimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-title'>{{item.news_title}}</view>
        <view class='imgcontent'>
          <image wx:for='{{item.news_images.attachment_content}}' wx:key="*this" src='{{item}}' class='newscover'></image>
        </view>
        <view class='oneimg-bom-bom'>
          <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
          <view>{{item.view_num}}
            <image class='viewnum' src='../../img/count.png'></image>
          </view>
        </view>
      </view>
      <view wx:if='{{item.news_type==3}}' class='content oneimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-bom'>
          <view class='oneimg-title'>{{item.news_title}}</view>
          <view class='oneimg-bom-bom'>
            <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
            <view>{{item.view_num}}
              <image class='viewnum' src='../../img/count.png'></image>
            </view>
          </view>
        </view>
        <image class='newscover' src="{{item.cover}}"></image>
      </view>
    </view>
    <view wx:for="{{essencethree}}" wx:key="*this" class='newscontent'>
      <view wx:if='{{item.news_type==0}}' class='content' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='newstitle'>{{item.news_title}}</view>
        <view class='bom'>
          <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
          <view>{{item.view_num}}
            <image class='viewnum' src='../../img/count.png'></image>
          </view>
        </view>
      </view>
      <view wx:if='{{item.news_type==1}}' class='content oneimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-bom'>
          <view class='oneimg-title'>{{item.news_title}}</view>
          <view class='oneimg-bom-bom'>
            <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
            <view>{{item.view_num}}
              <image class='viewnum' src='../../img/count.png'></image>
            </view>
          </view>
        </view>
        <image class='newscover' src="{{item.cover}}"></image>
      </view>
      <view wx:if='{{item.news_type==2}}' class='content moreimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-title'>{{item.news_title}}</view>
        <view class='imgcontent'>
          <image wx:for='{{item.news_images.attachment_content}}' wx:key="*this" src='{{item}}' class='newscover'></image>
        </view>
        <view class='oneimg-bom-bom'>
          <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
          <view>{{item.view_num}}
            <image class='viewnum' src='../../img/count.png'></image>
          </view>
        </view>
      </view>
      <view wx:if='{{item.news_type==3}}' class='content oneimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-bom'>
          <view class='oneimg-title'>{{item.news_title}}</view>
          <view class='oneimg-bom-bom'>
            <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
            <view>{{item.view_num}}
              <image class='viewnum' src='../../img/count.png'></image>
            </view>
          </view>
        </view>
        <image class='newscover' src="{{item.cover}}"></image>
      </view>
    </view>
  </scroll-view>
  <scroll-view  scroll-y="true" bindscrolltolower="bindDownLoad"   wx:if='{{!show}}' class="scoll-h">
    <view wx:for="{{list}}" wx:key="item"  class='newscontent'>
      <view wx:if='{{item.news_type==0}}' class='content' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='newstitle'>{{item.news_title}}</view>
        <view class='bom'>
          <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
          <view>{{item.view_num}}
            <image class='viewnum' src='../../img/count.png'></image>
          </view>
        </view>
      </view>
      <view wx:if='{{item.news_type==1}}' class='content oneimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-bom'>
          <view class='oneimg-title'>{{item.news_title}}</view>
          <view class='oneimg-bom-bom'>
            <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
            <view>{{item.view_num}}
              <image class='viewnum' src='../../img/count.png'></image>
            </view>
          </view>
        </view>
        <image class='newscover' src="{{item.cover}}"></image>
      </view>
      <view wx:if='{{item.news_type==2}}' class='content moreimg' data-id='{{item.news_id}}' bindtap='gonews'>
        <view class='oneimg-title'>{{item.news_title}}</view>
        <view class='imgcontent'>
          <image wx:for='{{item.news_images.attachment_content}}' wx:key="*this" src='{{item}}' class='newscover'></image>
        </view>
        <view class='oneimg-bom-bom'>
          <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
          <view>{{item.view_num}}
            <image class='viewnum' src='../../img/count.png'></image>
          </view>
        </view>
      </view>
      <view wx:if='{{item.news_type==3}}' class='content video' data-id='{{item.news_id}}' bindtap='gonews'>
        <image class='videoimg' src="{{item.cover}}"></image>
        <view class='video-bom'>
          <view class='video-title'>{{item.news_title}}</view>
          <view class='video-bom-bom'>
            <view>{{item.tag_list[0].tag_name}} · {{item.published_time}}</view>
            <view>{{item.view_num}}
              <image class='viewnum' src='../../img/count.png'></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </scroll-view> 
</swiper-item>

希望有大佬能给解决解决

小程序

阅读 4.1k

1 个回答

得票最新

qinchao888

98941833

发布于
2018-11-19

官方文档setData单次设置的数据不能超过1024kB。可能是因为一次性设置的数据量太大。

解决办法：对获取到的数据进行过滤，只设置需要的那部分：

伪代码：

data: {
    listData: []
}
...
var list = ...// 请求到的数据
var listData = list.map(item => {
    var data = {}
    data.name = item.name
    data.value = item.value
    ...// 将需要使用的数据加入到data中
    return data
})
this.setData({
    listData: listData
})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

小程序请求回来的数据太多该怎么渲染？

你尚未登录，登录后可以

小程序打开h5时，下载失效？

如何高效实现小程序自定义顶部和底部导航栏？

微信小程序如何滚动到页面的顶部？

小程序用onShareTimeline分享朋友圈后打开页面第一次打开onLoad参数为underfined?

支付宝小程序 herculex 状态管理？

小程序内跳转微信视频号直播，有什么官方支持方案？

使用uniapp 中的 uni.login 在小程序登录总是报错?

小程序请求回来的数据太多该怎么渲染？

你尚未登录，登录后可以

小程序打开h5时，下载失效？

如何高效实现小程序自定义顶部和底部导航栏？

微信小程序如何滚动到页面的顶部？

小程序用onShareTimeline分享朋友圈后打开页面第一次打开onLoad参数为underfined?

支付宝小程序 herculex 状态管理？

小程序内跳转微信视频号直播，有什么官方支持方案？

使用uniapp 中的 uni.login 在小程序登录 总是报错?

使用uniapp 中的 uni.login 在小程序登录总是报错?