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

文章描述了一个使用微信小程序实现的车辆列表功能,包括数据的分页加载、下拉刷新机制以及触底事件的处理,确保在用户滚动到页面底部时自动加载更多数据。
摘要由CSDN通过智能技术生成

在这里插入图片描述

/**

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

// 车辆列表接口

  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
        })
      }

    })
  },
  

/**

  • 页面上拉触底事件的处理函数
    */
  onReachBottom() {
  // 页面触底后 页码加一 并调用接口
    this.setData({
      pageNo: this.data.pageNo + 1
    })
    this.getList()
  },
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序上拉加载分页查询可以通过使用小程序原生组件 `scroll-view` 和 `onReachBottom` 事件来实现。 首先,在 `wxml` 中使用 `scroll-view` 组件来实现滚动条,并使用 `wx:for` 绑定数据列表: ```html <scroll-view scroll-y="true" bindscrolltolower="onReachBottom"> <view wx:for="{{list}}" wx:key="id"> <!-- 展示数据 --> </view> </scroll-view> ``` 然后,在 `js` 中监听 `onReachBottom` 事件,在触发事件时,向后端请求下一页数据,并将新数据与已有数据合并: ```javascript Page({ data: { list: [], // 已有数据列表 page: 1, // 当前页数 pageSize: 10 // 每页数据量 }, onReachBottom() { wx.showLoading({ title: '加载中', mask: true }) // 请求下一页数据 api.getList(this.data.page + 1, this.data.pageSize).then(res => { wx.hideLoading() const newList = res.data.list if (newList.length) { // 如果有新数据 this.setData({ list: [...this.data.list, ...newList], // 合并数据 page: this.data.page + 1 // 更新页数 }) } else { // 如果没有新数据,说明已经加载完毕 wx.showToast({ title: '已经到底了', icon: 'none' }) } }).catch(() => { wx.hideLoading() wx.showToast({ title: '加载失败,请重试', icon: 'none' }) }) } }) ``` 这样就可以实现微信小程序上拉加载分页查询了。需要注意的是,在请求数据时需要显示加载提示,避免用户误以为程序出现了问题。同时,如果没有新数据,需要提示用户已经到底了,避免用户不必要的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值