微信小程序列表分页以及setData过载处理

微信小程序列表分页以及setData过载处理

在项目中商品列表不会把所有数据一次性全部展示出来，一般会采取分页处理方式
此处我是每次展示6条数据，下滑重新加载，上拉数据叠加
效果图：

代码：
注意：我这里的pages 不是每次请求的页数，而是每次获取的下标，例如：第一次从下标0开始取，第二次从6开始取，这是后台写完后与我沟通过的，你们按照自身情况
wxml:

<block wx:for="{{shopList}}" wx:for-item="shopitem" wx:for-index="shopindex" wx:key="{{shopindex}}">
	<view wx:for="{{shopitem}}" wx:key="{{item.ID}}" data-id="{{item.ID}}" bindtap="goShopInfo">
		<view class="shopListImg">
			<image wx:if="{{item.Image}}" src="{{imgUrl}}{{item.Image}}" mode="widthFix" binderror='imageError' data-imgindex="{{index}}"></image>
		</view>
		<view class="shopListCount">
			<text class="shopListBt">{{item.Title}}</text>
			<text class="shopListPrice">￥{{item.PriceOriginal}}</text>
		</view>
	</view>
</block>

JS:

 data: {
    id: '', //商品分类ID
    keywords: '', //搜索内容
    state: 0, //点击切换的状态值
    sortList: [{
        bt: '综合'
      },
      {
        bt: '销量'
      },
      {
        bt: '价格'
      },
    ],
    shopList: [], //数据数组
    shopListPage: 0, //数组的对象下标
    pages: 0, //请求的数那一部分的数据
    pageSize: 6, //每次请求的数据数量
    hasShopList: true, //上拉时是否继续请求数据
    dataTitle: '拼命加载中...'
  },
   // 获取列表数据
  getProductSort: function (ID, keywords, ordertype, callback) {
    let that = this;
    let ordertypeKey = ordertype + 1
    wx.showLoading({
      title: '加载中',
    })

    WXAPI.getProductSort({	//此处是请求，这里经过了封装
      ID: ID,
      keywords: keywords,
      ordertype: ordertypeKey,
      start: that.data.pages,
      pageSize: that.data.pageSize
    }).then(function (res) {
      console.log(res);
      if (res.data.data.length == 0) {	//这里判断根据自己需要，我这边如果没有数据data为空，这是走一个回调更改页面显示
        callback(res.data)
      } else if (res.data.data[0].proList.length > 0) {
        let resShopList = res.data.data[0].proList
        console.log(resShopList);
        if (resShopList.length < that.data.pageSize) {	//如果获取的数据长度小于定义的长度，说明这是最后的数据
          that.setData({
            [`shopList[${that.data.shopListPage}]`]: resShopList,	//这里是处理setData一次加载过大的操作，每次只传输最新的6条数据，shopList数组采用多维数组
            hasShopList: false,
            dataTitle: '已经到底了'
          })
        } else {
          that.setData({
            [`shopList[${that.data.shopListPage}]`]: resShopList,
            hasShopList: true,
            pages: that.data.pages,
            dataTitle: '拼命加载中...'
          })
          console.log(that.data.shopList);
        }
      }
      wx.hideLoading();
      callback()
    }).catch(function (e) {

    })
  },
   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.setData({	//下拉时一切归于默认
      keywords: '',
      pages: 0,
      shopListPage: 0,	
      shopList: []	//下拉时清空数组数据
    })
    that.getProductSort(that.data.id, '', that.data.state, function () {
      wx.stopPullDownRefresh() //停止下拉刷新
    });
  },
   /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('上拉加载');
    let that = this;
    if (that.data.hasShopList) {
      that.setData({
        pages: that.data.pages + 6,
        shopListPage: that.data.shopListPage + 1	//每次加载新的数据，数组的对象数量就+1
      })
      that.getProductSort(that.data.id, that.data.keywords, that.data.state);

    }
  },

css:

/* 商品列表 */

.shopListBox {
  padding: 15rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shopListBox>view {
  width: 49%;
  margin-bottom: 15rpx;
  background: #fff;
}

.shopListBox .shopListImg {
  width: 100%;
  max-height: 400rpx;
  overflow: hidden;
}

.shopListImg image {
  width: 100%;
  display: block;
}

.shopListCount {
  padding: 15rpx;
  display: flex;
  flex-direction: column;
}

.shopListCount .shopListBt {
  height: 85rpx;
  font-size: 32rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.shopListCount .shopListPrice {
  color: red;
  font-size: 32rpx;
}

贴一张后台返回的数据：