原生小程序分页/上拉加载(通过页面生命周期)

/**

  • 页面的初始数据
    */
js 复制代码
  data: {
    // 一页多少条
    pageSize: 10,
    // 在第多少页
    pageNo: 1,
    // 列表数据
    list: [],
  },

// 车辆列表接口

js 复制代码
  getList() {
 
    getCars({
      page: this.data.pageNo,
      pagesize: this.data.pageSize
    }).then((res) => {
      console.log(res);
      // 停止下拉刷新操作
      wx.stopPullDownRefresh()
      // 返回有数据时
      if (res.data.list.length != 0) {
      // 如果是第一页
        if (this.data.pageNo == 1) {
          this.setData({
            list: res.data.list
          })
        } else {
        // 不是第一页 则要拼接上之前的列表
          this.setData({
            list: this.data.list.concat(res.data.list)
          })
        }
      } else {
        wx.showToast({
          title: '没有更多数据了!',
          icon: 'none',
          duration: 1500
        })
      }

    })
  },
  

/**

  • 页面上拉触底事件的处理函数
    */
js 复制代码
  onReachBottom() {
  // 页面触底后 页码加一 并调用接口
    this.setData({
      pageNo: this.data.pageNo + 1
    })
    this.getList()
  },
相关推荐
bug总结7 小时前
uniapp 微信小程序分包规范
微信小程序·小程序·uni-app
Quor7 小时前
小程序工作室:AI 生成即运行的可视化工作台
人工智能·小程序
盟道科技12 小时前
小程序电商订单超时自动取消的三种实现方案:定时扫描、Redis 过期监听、延迟消息对比与生产落地
数据库·redis·小程序
lhldsg13 小时前
智慧场馆解决方案小程序系统:从架构设计到落地实践
java·小程序·需求分析
凉红茶14 小时前
用Cursor开发微信小程序的第一天
微信小程序·小程序·ai编程
CRMEB系统商城15 小时前
汽车养护连锁的数字化底座CRMEB 多门店系统实战方案
java·开发语言·小程序·开源·汽车
小马过河R15 小时前
微信小程序自定义登录态维护:从入门到生产级落地
后端·微信小程序·小程序·架构·登录态
火眼金睛炼单词15 小时前
零基础高效记忆单词:小程序学习法的完整实操指南
学习·小程序
vx+_bysj686916 小时前
springboot 旅行小程序97353
spring boot·后端·小程序·旅行小程序
andrsted21 小时前
用练题簿小程序 - 让错题不再白错
学习·微信小程序·小程序·学习方法