小程序分页，滚动条滚到底部时往列表里添加数据

最近做小程序分页，可以有两种处理方式，一种是滚动到底部显示下一页，另一种是滚动到底部，往列表里加一页数据，我用的是第二种，效果比第一种好多了

wxml:列表底部添加文字提示：

<view wx:if="{{goodsList.length > 0}}" class="loading"> {{loadingTxt}}</view>

wxss:

1.  
   .loading{
2.  
   text-align: center;
3.  
   font-size: 12px;
4.  
   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>

 

 

完成 结束。

转载于:https://www.cnblogs.com/flysem/p/9358240.html