微信小程序的下拉刷新事件和上拉触底事件

一、下拉刷新事件

1.特别注意：需要在当前界面的配置文件.json文件中去设置开启下拉刷新事件

• "enablePullDownRefresh": true

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

2.上拉刷新的事件

（1） wx.showNavigationBarLoading(); 显示导航加载进度
（2） wx.hideNavigationBarLoading(); 隐藏导航加载进度
（3） wx.stopPullDownRefresh(); 停止下拉刷新

• 直接见示例场景：下拉刷新重新请求页面列表数据

onPullDownRefresh: function () {
    wx.showNavigationBarLoading(); //显示导航加载进度
    // wx.startPullDownRefresh();
    console.log("下拉刷新触发");
    const _this = this;
    _this.data.pageNo = 1;
    ShopApi.RequestShopApi(_this.data.pageNo, data => {
      setTimeout(() => {
        const productList = data.resultInfo.list;
        _this.data.totalNum = data.resultInfo.totalNum;
        _this.setData({
          productList
        });
        wx.hideNavigationBarLoading(); //隐藏导航加载进度
        wx.stopPullDownRefresh(); // 停止刷新
      }, 2000);
    })
  },

3. 上拉触底事件

• 示例场景：下拉更新更多（第二页）的页面数据

onReachBottom: function () {
    const _this = this;
    console.log("触底事件>>>");
    if (++_this.data.pageNo <= _this.data.totalNum) {
      wx.showLoading({
        title: '加载中',
      }) //设置下拉加载提示框
      ShopApi.RequestShopApi(_this.data.pageNo, data => {
        const newList = data.resultInfo.list;
        console.log("newList>>>", newList);
        // 将第二页的数据数据与之前的数据数据合并成一个数组，在界面中显示出来
        let list = [..._this.data.productList, ...newList];
        // console.log("list>>>", list);  
        _this.setData({
          productList: list
        })
        wx.hideLoading(); //隐藏提示框
      })
    }
  }