小程序 上拉加载数据

请求数据

  async getList() {
    let data = {
      "model": "1",
      "pageSize": this.data.pageSize,
      "pageNum": this.data.pageNum
    }
    let res = await subCertificate(data)
    if (res.resultStates !== 0) {
      return Dialog.alert({
        title: '提示',
        message: '暂无该车辆相关数据',
      }).then(() => {});
    }
    let list = res.content.taskVoList
    if (this.data.pageNum > 1) {
      list = this.data.list.concat(res.content.taskVoList)
    }
    this.setData({
      list: list,
      total: res.content.total,
      vin: res.content.vin
    })
  },

上拉加载数据

onReachBottom: function () {
    let num = Math.ceil(this.data.total / 5)//向上取整
    var self = this;
    if (this.data.pageNum >= num) {
      Dialog.alert({
        title: '提示',
        message: '没有更多数据了',
      }).then(() => {});
    } else {
      var pageNumber = self.data.pageNum + 1;
      self.setData({
        pageNum: pageNumber,
      })
      this.getList()
    }
  },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现微信小程序上拉加载更多数据,你可以通过以下步骤实现: 1. 在 wxml 文件中添加一个 scroll-view 组件,并设置其 scroll-into-view 属性为一个变量,用于记录当前滚动到的位置。 2. 在 js 文件中,定义一个变量 page,表示当前加载的页数,初始值为 1。 3. 在 scroll-view 组件上绑定一个 scrolltolower 事件,当滚动到底部时触发该事件。 4. 在 scrolltolower 事件中,发送请求获取下一页数据,并将 page 加 1。 5. 将获取到的数据添加到原有数据列表中。 6. 在获取数据之前,显示一个 loading 提示。 7. 在请求结束后,隐藏 loading 提示,并更新 scroll-into-view 属性,将页面滚动到数据的最后一项。 以下是一个简单的示例代码: ``` // wxml 文件 <scroll-view scroll-into-view="{{scrollIntoView}}" scroll-y="true" bindscrolltolower="loadMoreData"> <view wx:for="{{dataList}}" wx:key="{{index}}">{{item}}</view> </scroll-view> // js 文件 Page({ data: { dataList: [], // 数据列表 page: 1, // 当前页数 scrollIntoView: '', // 当前滚动到的位置 loading: false // 是否正在加载数据 }, onLoad: function () { this.loadData() }, // 加载第一页数据 loadData: function () { // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=1', success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: res.data.data }) } }) }, // 加载更多数据 loadMoreData: function () { // 如果正在加载数据,则不处理 if (this.data.loading) { return } // 显示 loading 提示 wx.showLoading({ title: '加载中', }) // 发送请求获取数据 wx.request({ url: 'https://example.com/api/data?page=' + (this.data.page + 1), success: res => { // 隐藏 loading 提示 wx.hideLoading() // 更新数据列表 this.setData({ dataList: this.data.dataList.concat(res.data.data), page: this.data.page + 1, scrollIntoView: 'item-' + (this.data.dataList.length - 1) // 将页面滚动到最后一项 }) }, complete: () => { // 标记数据加载完成 this.setData({ loading: false }) } }) // 标记正在加载数据 this.setData({ loading: true }) } }) ``` 在上述示例中,我们使用了 wx.showLoading 和 wx.hideLoading 方法来显示和隐藏 loading 提示。注意,在请求结束后,需要在 complete 回调函数中调用 setData 方法,以更新 loading 变量的值。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值