页面再加载

当我们使用返回数据量大的接口的时候,如果全部申请回来,就会影响项目的性能,滚动条触底再加载下一页数据能确保用户讲页面拉到页面底部的时候再去申请下一页的数据

实现原理

1. 找到滚动条触底事件
   使用的是微信小程序中的 onReachBottom
2. 判断还有没有下一页数据
   1. 获取到申请回来的总页数,如果只有总条数的话就用Math.ceil(总条数/页容量)
   2. 判断当前的页码
   3. 比较页码和总页数
      1. 页码>总页数 数据加载完了 弹出一个wx.showToast提示加载完成
      2. 页码<总页数 加载下一页数据 重新加载时,data中当前的页码要加一
      3. 取回来的数据不能直接覆盖之前的数据,要和之前的数据一起拼接起来

微信小程序页面再加载

页面上滑 滚动条触底事件

    //页面上滑 滚动条触底事件
    onReachBottom(){
        if(this.QueryParams.pagenum >= this.totalPages){
            //没有下一页数据
            wx.showToast({
              title: '到底了',
            })
        }else{
            //申请下一页的数据
            this.QueryParams.pagenum++
            this.getinfo()
        }
    },

申请数据的异步函数

    async getinfo(){
        wx.showLoading({
          title: '正在加载',
        })

        let res = await request({url:'/goods/search',data:this.QueryParams})
        //计算总页数
        const totallen = res.goods.length
        //  页面的数据/页容量
        this.totalPages = Math.ceil( totallen /  this.QueryParams.pagesize)

        this.setData({
            allInfo:[...this.data.allInfo,...res.goods]
        })
 
            //关闭下拉刷新窗口
            wx.stopPullDownRefresh()
            wx.hideLoading()
            
    },

最后在记录一个微信下拉刷新事件

由于我们之前异步函数往data添加数据的时候是和之前的数据进行的拼接操作
所以我们这里必须先重置数据,再使用异步函数去申请数据

   //下拉刷新事件
    onPullDownRefresh(){
        //重置数组
        this.setData({
            allInfo:[]
        })
        //重新发送请求
        this.getinfo()
    },