小程序-下拉刷新&&上拉加载

小程序实现下拉刷新和上拉加载更多有两种方式：
1.通过小程序自带的页面相关事件处理函数 onPullDownRefresh 和 onReachBottom 来实现；
2.通过 scroll-view 组件的 bindscrolltolower 和 bindscrolltoupper 实现。
个人比较推荐使用第一种，因为scroll-view组件的两个事件的触发会出现些许小问题，不是不能触发就是多次触发，要做特殊处理，不省心。

onPullDownRefresh + onReachBottom

  <block wx:for='{{tradeList}}'>
      <!-- 列表内容... -->
  </block>
  <!--  底部加载显示  -->
  <import src='/template/footer/footer.wxml' />
  <template is='hasMore' data='{{...foot}}'></template>

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      pageIndex: 1,
    });
    this.pullDownRefreshData(this);
  },

  /**
    * 页面上拉触底事件的处理函数
    */
  onReachBottom: function () {
    this.setData({
      pageIndex: this.data.pageIndex + 1,
    });
    this.pullUpRefreshData(this);
  },


  /**
   * 下拉刷新
   */
  pullDownRefreshData: function (context) {
    let params = {
      pageIndex: 1,
    };
    app.YoniClient.request(app.Func.GET_FAVORITE_LIST, params, function (res) {
      //console.log("下拉刷新: " + JSON.stringify(res));
      if (res.code == 0) {
        context.setData({
          tradeList: res.result.goodsList,
          foot: { loading: res.result.goodsList.length == 10, nomore: false },
        });
      }
      wx.stopPullDownRefresh();
    });
  },

  /**
   * 上拉加载
   */
  pullUpRefreshData: function (context) {
    let params = {
      pageIndex: context.data.pageIndex,
    };
    app.YoniClient.request(app.Func.GET_FAVORITE_LIST, params, function (res) {
      //console.log("上拉加载: " + JSON.stringify(res));
      if (res.code == 0) {
        let tempList = context.data.tradeList;
        let collectList= tempList.concat(res.result.goodsList);
        context.setData({
          tradeList: collectList,
          foot: { loading: collectList.length == 10, nomore: collectList.length != 10 },
        });
      }
    }, true);
  },

scroll-view

<scroll-view class='scroll-view_V' scroll-y bindscrolltolower='pulluprefresh' bindscrolltoupper='pulldownrefresh'>
     <block wx:for='{{orders.detail}}' wx:for-item='items' wx:for-index='indexx'>
            <!-- 列表内容... -->
     </block>
     <!--  底部加载显示  -->
     <import src='../../template/footer/footer.wxml' />
     <template is='hasMore' data='{{...foot}}'></template>
</scroll-view>

  /**
   * 下拉刷新
   */
  pulldownrefresh: function () {
    if (!this.data.loadMore) {
      this.setData({
        refresh: true,
        foot: { loading: true, nomore: false },
      })
      wx.startPullDownRefresh({

      });
      this.loadOrderList(this.data.swipe_config.current);
    }
  },

  /**
   * 上拉加载
   */
  pulluprefresh: function () {
    if (!this.data.loadMore) {
      console.log('----pulluprefresh----');
      this.setData({
        loadMore: true,
        //foot: { loading: true, nomore: false },
      })
      this.loadOrderList(this.data.swipe_config.current, true);
    }
  },

实现效果：

refresh.gif

拍的不是很好，实际效果是比较棒的。

其实这两种也是可以搭配着使用，看项目需求了！