全部
常见问题
产品动态
精选推荐

微信小程序开发使用onreachBottom实现页面触底加载及分页

管理 管理 编辑 删除

一 简要介绍一下onreachBottom事件

onreachBottom和onLoad以及onShow一样,都属于小程序的生命周期事件,作用就是在页面下拉到底部时触发这个事件,一般适用于数据比较多的情况下,实现懒加载并分页展示数据。

截图中展示了小程序对onreachBottom事件的具体解释和参数。

eb1da202305191125512016.png

二  实例展示

此次展示的实例是在小程序首页加载二手车车源信息的下拉分页加载数据的效果。

  1. 首先需要在data里面初始化分页的页数和获取的数据数组。

31937202305191126246551.png

2. 写好触底之后加载新数据并保留老数据的方法。我把加载第一页数据和触底加载新数据写在了一个方法里面,方法里面加入了一个布尔型的reachBottom参数,在onLoad事件里参数为false,只加载第一页;在onreachBottom事件里参数为true,要加载新的数据.

3. 向后端请求的方法为util.request,详情可以看我上一个博客,贴个链接.这里的参数比较多,贴图

b7607202305191127046512.png

4. 将从后端请求的数据保存在supplyList中,并且通过setData方法写入data中的supplyList中,将总页数也保存在totalPages中,最后每获取一整页的数据之后将页数加一,为下页调用数据做准备.方法的整体代码如下.

getSupplyList(reachBottom) {//参数表示是否为触底下拉加载数据
    wx.showLoading({
      title: '加载中...',
    });
    let that = this;//在回调甘薯里,this有时候不能直接用,防止出bug所初始化一个that
    util.request(api.SupplyList, {//发送请求
      type: that.data.type,
      page: that.data.page,
      limit: that.data.limit,
      searchValue: that.data.searchValue//请求的四个参数
    }).then(function (res) {
      console.log(that.data.page);
      if (res.errno === 0) {//为0请求成功
        let supplyList = res.data.list.map(item => {
          item.dueTime = util.formatTime2(new Date(item.dueTime), "Y/M/D");//设置日期格式
          item.herbListImage && (item.herbListImage01 = item.herbListImage.split(',')[0])//设置获取的图片列表
          item.companyLogo = item.companyLogo || item.avatar;
          item.companyName = item.companyName || item.nickname;
          return item;//将这一条数据返回supplyList并保存
        });
        //触底加载新数据并保留老数据
        if (reachBottom) {
          supplyList = [...that.data.supplyList, ...supplyList]//将新数据加入老数据中
        }
        that.setData({//将获取的值赋值给data中的数组和总页数
          supplyList: supplyList,
          totalPages: res.data.pages
        });
        that.data.page++//所有操作完成后页数加一
        wx.hideLoading();
      }
    }).finally(() => {
      wx.hideLoading();
    });
  },

5. 写好getSupplyList方法之后,可以在onReachBottom触底加载事件里面进行调用,调用的时候要判断当前页是否小于总页数,小于的话进行调用,并且在每次调用后将当前页数加一,代码如下.

  onReachBottom() {//触底加载事件
    if (this.data.totalPages > this.data.page) {//判断当前也是否小于总页数
      this.setData({
        page: this.data.page + 1//当前页加一
      });
    } else {
      return false;
    }
    this.getSupplyList(true);//调用方法
  },

三 遇到的一些问题

在实际开发这个过程当中,也遇到了一些问题,可以和大家分享一下,互相学习

在测试的时候,第一次分页加载实现了,后面都没有实现,在排查之后,发现经过第一次的分页之后this.data.page即当前页面变为了3,在刷新页面之后并没有重新初始化为1,所以要在页面每次关闭之后将页面重新赋值为1,如图.

aab75202305191129027882.png

在写getSupplyList方法时,在data里面定义好的变量使用的时候总是显示 undefined 未定义,在csdn上查到了原因,是因为在js的一些函数或者回调函数中,直接用this可能是无法访问的,需要重新定义一个变量代替this,解决方法如下,用that代替this来使用data中的变量.

如果要实现想动图里面那样的无感触底加载的功能,只需要在对应的json文件里面加入"onReachBottomDistance": 300,可以在离底部300的时候就开始执行触底加载事件.


CRMEB-慕白寒窗雪 最后编辑于2023-05-19 11:30:01

快捷回复
回复({{post_count}}) {{!is_user ? '我的回复' :'全部回复'}}
回复从新到旧

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}} 作者 管理员 企业

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest==1? '取消推荐': '推荐'}}
{{item.floor}}#
{{item.user_info.title}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
{{item.like_count}}
{{item.showReply ? '取消回复' : '回复'}}
删除
回复
回复

{{itemc.user_info.nickname}}

{{itemc.user_name}}

作者 管理员 企业

回复 {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}   {{itemc.ip_address}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回复' : '回复'}}
删除
回复
回复
查看更多
回复
回复
1729
{{like_count}}
{{collect_count}}
添加回复 ({{post_count}})

相关推荐

CRMEB-慕白寒窗雪 作者
社区运营专员---高冷のBoy | 呆萌のGirl

回答

1620

发布

1757

经验

42033

快速安全登录

使用微信扫码登录
{{item.label}} {{item.label}} {{item.label}} 板块推荐 常见问题 产品动态 精选推荐 首页头条 首页动态 首页推荐
加精
取 消 确 定
回复
回复
问题:
问题自动获取的帖子内容,不准确时需要手动修改. [获取答案]
答案:
提交
bug 需求 取 消 确 定

微信登录/注册

切换手机号登录

{{ bind_phone ? '绑定手机' : '手机登录'}}

{{codeText}}
切换微信登录
CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

微信扫码咨询

CRMEB开源商城下载 开源下载 CRMEB官方论坛 帮助文档
返回顶部 返回顶部
CRMEB客服