微信小程序下拉刷新和上滑刷新

用户上滑页面

• 滚动条触底 开始加载下一页数据
• 找到页面滚动条触底事件
• 判断还有没有下一页数据

1. 获取到总页数 只有总条数
   总页数 = Meth.ceil(总条数total / 页容量 pagesize)
2. 获取到当前的页码 pagenum
3. 判断一下 当前的页码是否大于等于 总页数

• 假设没有下一页数据 弹出一个提示
• 假设还有下一页数据 就加载下一页数据

1. 当前的页码++
2. 重新发送请求
3. 数据请求回来 要对data中的数据进行拼接而不是全部替换

data:{
    goodList:[],
}
// 接口要的参数
queryParams:{
  query:"",
  cid:'',
  pagenum:1,
  pagesize:10
},
// 总页数
totalPages:1,
getGoodsList(){
  request({
     url:'/goods/search',
     data:this.queryParams
  }).then((res)=>{
    // 获取总条数
    const total = res.data.message.total
    // 计算总页数
    this.totalPages = Math.ceil(total/this.queryParams.pagesize)
    this.setData({
      goodsList:[...this.data.goodsList,...res.data.message.goods]
    })
    // 关闭下拉刷新的窗口
    //wx.stopPullDownRefresh()          
  })
},
onReachBottom(){
  // 判断是否有下一页数据
  if(this.queryParams.pagenum >= this.totalPages){
    // 没有下一页数据
    wx.showToast({title: '没有下一页数据'});
  }else{
    this.queryParams.pagenum++
    this.getGoodsList()
  }
},

效果如下：

下拉刷新页面

在页面的json文件中开启一个配置项
"enablePullDownRefresh":true
出现下拉样式"backgroundTextStyle":"dark"
找到触发下拉刷新事件

1. 重置数据数组
2. 重置页码 设置为1
3. 重新发送请求
4. 关闭等待效果

    onPullDownRefresh(){
        this.setData({
            goodsList:[]
        })
        this.queryParams.pagenum = 1
        this.getGoodsList()
        // 关闭下拉刷新的窗口
        wx.stopPullDownRefresh() 
    }

效果如下：