首页 > 上网技巧 > 电脑小技巧 > 微信小程序分页列表setData数据过大问题

微信小程序分页列表setData数据过大问题

时间:2019-08-22 17:49 作者:QQ地带 我要评论

解决方法-分页渲染数据
 
//index.js
Page({
  data: {
    list: [],
    page: 1,
    pageNumber: 10
  },
  onLoad: function() {
    this.loadData();
  },
 
  loadData() {
    let data = [];
    for (let i = 0; i < this.data.pageNumber; i++) {
      data.push(1 + i + (this.data.page - 1) * this.data.pageNumber)
    }
    if (this.data.page == 1) {
      this.setData({
        list: []
      })
    }
    this.setData({
      [`list[${this.data.page-1}]`]: data//分页渲染数据
    })
    wx.stopPullDownRefresh()
    wx.hideLoading()
  },
 
  onPullDownRefresh() {
    this.setData({
      page: 1
    })
    setTimeout(()=>{
      this.loadData();
    },1000)
  },
 
  onReachBottom() {
    this.setData({
      page: ++this.data.page
    })
    wx.showLoading()
    setTimeout(() => {
      this.loadData();
    }, 1000)
  }
})
 
<!--index.wxml-->
<view class="list-box">
  <view class="list-page" wx:for="{{list}}" wx:for-item="pitem" wx:for-index="pindex" wx:key="{{pindex}}">
    <view class="list-item" wx:for="{{pitem}}" wx:key="{{index}}">{{item}}</view>
  </view>
</view>
 
/* index.wxss */
.list-item{
  height: 200rpx;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #fff;
}
 

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告