小程序下拉刷新，上拉加载更多

小程序下拉刷新，上拉加载更多

小程序下拉刷新上拉加载在很多地方都用的到

我们都知道在小程序中有两个自带的钩子函数

onPullDownRefresh（下拉动作）和onReachBottom（上拉触底事件）

那我们下拉刷新上拉加载正好是在这两个事件触发时触发的

首先下拉刷新首先要在小程序json文件中开启一个配置项

"enablePullDownRefresh":true,

这样在顶部下拉时就会触发下拉的事件

既然我们要刷新，那么就要重置数组的数据变为刚进入页面时间的数据

也就是重新请求一遍数据

onPullDownRefresh(){
    // 1 重置数组
    this.setData({
      goodsList:[]
    })
    // 2 重置页码
    this.QueryParams.pagenum=1;
    // 3 发送请求
    this.getGoodsList();
  }

把所有参数重置了，页面重新渲染，那么这就是我们下拉刷新需要做的

最后别忘了关闭下拉刷新的窗口

上拉加载

我们根据一个页面显示的条数和总数据判断出一共需要多少页

然后跟当前的页码比较一下看还有没有下一页数据

如果没有页数了

就提示没有下一页数据

如果还有下一页数据就让请求数据的参数的页码+1

 onReachBottom(){
  //  1 判断还有没有下一页数据
    if(this.QueryParams.pagenum>=this.totalPages){
      // 没有下一页数据
      //  console.log('%c'+"没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
      wx.showToast({ title: '没有下一页数据' });
        
    }else{
      // 还有下一页数据
      //  console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  },

在请求一边数据且让之前的数据和新请求到的数据拼接起来

 this.totalPages=Math.ceil(total/this.QueryParams.pagesize);
    // console.log(this.totalPages);
    this.setData({
      // 拼接了数组
      goodsList:[...this.data.goodsList,...res.goods]
    })

这样就完成了下拉刷新上拉加载