小程序分頁，滾動條滾到底部時往列表里添加數據

最近做小程序分頁，可以有兩種處理方式，一種是滾動到底部顯示下一頁，另一種是滾動到底部，往列表里加一頁數據，我用的是第二種，效果比第一種好多了

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>

 

 

完成 結束。