小程序分页,滚动条滚到底部时往列表里添加数据
最近做小程序分页,可以有两种处理方式,一种是滚动到底部显示下一页,另一种是滚动到底部,往列表里加一页数据,我用的是第二种,效果比第一种好多了
wxml:列表底部添加文字提示:
<view wx:if="{{goodsList.length > 0}}" class="loading"> {{loadingTxt}}</view>
wxss:
.loading{ text-align: center; font-size: 12px; margin: 10px 0;
js 参数定义:
Page({ /** * 页面的初始数据 */ data: { /**分页参数 */ keyword: '', searchStatus: false, goodsList: [], page: 1, size: 2, id: 0, loadingTxt: '', noMoreData: false, },
数据请求方法:
//获取列表 getGoodsList: function (paged = false) { let that = this; // util.request(api.GoodsList, { id: that.data.selectedId, page: that.data.page, size: that.data.size }, 'POST').then(function (res) { util.request(app.globalData.api_site + app.globalData.api_goods_list, 'GET', { category_id: '0', keywords: '',//搜素 page_size: that.data.size, page_index: that.data.page, wid: app.globalData.subDomain, fromplat: app.globalData.fromplat } ).then((res) => { if (res.status === 1) { let goods = []; if (!paged) { goods = res.data; console.log('goods',goods); } else { //当滚动到页面底部时,往列表里添加数据,其它情况(关键字查询,页签切换等)只显示一页数据 goods = that.data.goodsList.concat(res.data);//concat:复制整个数组到前面的数组 } that.setData({ loadingTip: '', noMoreData: false, goodsList: goods, }); if (res.data.length < that.data.size) { that.setData({ loadingTxt: '没有更多内容', noMoreData: true, }); } } }); },
其他地方调用
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { this.data.page = 1 this.getGoodsList(); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { if (!this.data.noMoreData) { this.data.page = this.data.page + 1; this.getGoodsList(true); }; },
页面显示:index.wxml
<view class="goods-box" wx:for-items="{{goodsList}}" wx:key="{{index}}" bindtap="toDetailsTap" data-id="{{item.id}}"> <view class="img-box"> <image src="{{item.focusImgUrl}}" class="image" mode="aspectFill" lazy-load="true"/> </view> <view class="goods-title">{{item.productName}}</view> <view style='display:flex;'> <view class="goods-price">¥ {{item.salePrice}}</view> <view wx:if="{{item.marketPrice && item.marketPrice > 0}}" class="goods-price" style='color:#aaa;text-decoration:line-through'>¥ {{item.marketPrice}}</view> </view> </view>
完成 结束。