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

/**

  • 页面的初始数据
    */
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()
  },
相关推荐
樊南6 小时前
【esp32-uniapp】uniapp小程序篇02——引入组件库
小程序·uview·sass·scss·wechat·uiewplus·colorui
计算机-秋大田14 小时前
基于微信的原创音乐小程序的设计与实现(LW+源码+讲解)
java·开发语言·后端·微信·小程序·课程设计
计算机-秋大田20 小时前
基于微信小程序的校园二手交易市场的设计与实现(LW+源码+讲解)
java·后端·微信小程序·小程序·课程设计
丁总学Java20 小时前
微信小程序中常见的 跳转方式 及其特点的表格总结(wx.navigateTo 适合需要返回上一页的场景)
微信小程序·小程序
计算机-秋大田21 小时前
基于微信阅读网站小程序的设计与实现(LW+源码+讲解)
spring boot·后端·微信·微信小程序·小程序·课程设计
向明天乄21 小时前
小程序 uniapp 地图 自定义内容呈现,获取中心点,获取对角经纬度,首次获取对角经纬度
小程序·uni-app
说私域1 天前
付费会员制与开源AI智能名片S2B2C商城小程序在现代营销中的应用
人工智能·小程序·开源
计算机学姐1 天前
基于微信小程序的网上订餐管理系统
java·vue.js·spring boot·mysql·微信小程序·小程序·intellij-idea
计算机-秋大田1 天前
基于JAVA的微信点餐小程序设计与实现(LW+源码+讲解)
java·开发语言·后端·微信·小程序·课程设计
计算机-秋大田2 天前
基于微信小程序的校园失物招领系统设计与实现(LW+源码+讲解)
java·前端·后端·微信小程序·小程序·课程设计