小程序下拉刷新与上拉加载

下拉刷新与上拉加载，是移动端项目必不可少的功能，可以方便用户操作，提高用户体验；其中，下拉刷新相当于浏览器中的刷新按钮或F5；而上拉加载则相当于分页加载。

小程序的每个页面都有一个用来注册页面page函数，这个函数参数除了有数据、生命周期以外，还有一些用来监听用户操作页面的相关处理函数——onPullDownRefresh、onReachBottom。

1、下拉刷新onPullDownRefresh

1）在json文件中配置"enablePullDownRefresh": true

2. 当下拉时，发送数据请求，此时参数page=1

onPullDownRefresh() {

    wx.showNavigationBarLoading();

    const that = this;

    this.setData({

        page: 1,

    })

    wx.request({

      url: 'https://xxx/?page=1',

      method: "GET",

      success:  (res) => {

        const { code, data } = res.data;

        if( code === 1) {

             that.setData({

                  list:  data,

            });

        }

      },

     fail:  (err) => {

        console.log(err)

      },

     complete: () => {

        wx.hideNavigationBarLoading();

        wx.stopPullDownRefresh();

     }

  })

}

2、上拉加载onReachBottom

onReachBottom () {

    const that = this;

    // 是否还有更多,来决定是否发送请求

    const { curPage, totalPage } = this.data;

    if( curPage >= totalPage) {

        return false

    }

    wx.showLoading({

      title: '加载中...',

    })

    this.setData({

        page: page + 1,

    })

    wx.request({

      url: `https://xxx/?page=${that.data.page}`,

      method: "GET",

      success: (res) => {

        const { code, data } = res.data;

        let newData = []；

        if(code === 1) {

            that.setData({

                list: that.data.list.concat(data);

            })                    

        }

     },

     fail: (err) => {

         console.log(err)

      },

      complete() {

         wx.hideLoading();

      }

    })

}

总结：以上基本可实现下拉刷新和上拉加载功能，但是，上述代码结合实际场景，根据后台返回的数据是否还有下一页来判断是否继续请求数据；此外，上拉加载的页面交互处理也是特别需要注意的。