小程序滚动条自定义上拉加载

最新推荐文章于 2024-04-21 09:10:41 发布

岩崎理奈

最新推荐文章于 2024-04-21 09:10:41 发布

阅读量720

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序笔记

本文链接：https://blog.youkuaiyun.com/qq_41874847/article/details/85322958

微信小程序笔记专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现滚动条加载更多数据的方法，通过自定义loadMore函数，结合api请求，实现了数据的动态加载，并展示了如何处理数据及更新界面的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为数据是在滚动条内,所以用 onReachBottom()没有效果,直接自定义一个方法来刷新就可以了.

<swiper-item ><scroll-view scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="loadMore">
    <template is="listReceive" data="{{myReceive,currentTab}}"></template>
  </scroll-view></swiper-item>

data: {
    currentTab: 0,
    isactive: true,
    scrollHeight: 0,
    myReceive:[],
    size: 10,
    pageEnd: false,
    state:'待确认'
  },
  
loadMore: function (e) {
    var myReceive = {
      state: this.data.state,
      page: 1,
      size: this.data.size
    }
    var that = this
    api.getRequest(api.apiUrl.ORDERS_ACCEPTED_GET, myReceive, function (res) {
      var datas = res.data.data.items;
      for (let i = 0; i < datas.length; i++) {
        datas[i]["limitedAt"] = tool.toDate(datas[i]["limitedAt"])
        datas[i]["createdAt"] = tool.getDateDiff(datas[i]["createdAt"])
        console.log("erfssdfserdddddddddd", datas)
      }
      that.setData({
        myReceive: datas
      })
      var size = that.data.size
      if (datas.length >= size) {
        wx.showLoading({
          title: '玩命加载中',
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 1000)
        that.setData({
          size: size + 10
        })
      } else {
        wx.showLoading({
          title: '没有更多数据',
        })
        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
        that.setData({
          pageEnd: true,
        })
      }
    })
  },