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

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

下拉刷新

要实现下拉刷新首先在页面json文件中配置配置如下内容

使用的是小程序自带的页面配置，然后我们需要在获取到数据时关闭下拉刷新：

//在我们获取到数据的代码后面加上这个关闭下拉刷新即可
wx.stopPullDownRefresh();

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

上拉加载

首先写一下我们需要的变量数据：

data: {
   //数据存放的数组
    goodsList:[]
  },
  // 接口要的参数
  QueryParams:{
    query:"",
    cid:"",
    pagenum:1,//第一页
    pagesize:10//每页10条
  },
  // 总页数
  totalPages:1,

然后我们要先获取数据，计算总条数来拼接数组：

// 获取商品列表数据
  async getGoodsList(){
    const res=await request({url:"/goods/search",data:this.QueryParams});
    // 获取 总条数
    const total=res.total;
    // 计算总页数
    this.totalPages=Math.ceil(total/this.QueryParams.pagesize);
    // console.log(this.totalPages);
    this.setData({
      // 拼接数组
      goodsList:[...this.data.goodsList,...res.goods]
    })
    // 关闭下拉刷新的窗口
    wx.stopPullDownRefresh();
  },

然后使用页面上滑，触底事件来实现上拉加载新的数据：

onReachBottom(){
  //  1 判断还有没有下一页数据
    if(this.QueryParams.pagenum>=this.totalPages){
      wx.showToast({ title: '没有下一页数据' });
    }else{
      this.QueryParams.pagenum++;
      this.getGoodsList();
    }
  } 
})