小程序上拉触底加载更多数据

最新推荐文章于 2024-11-25 22:13:09 发布

原创最新推荐文章于 2024-11-25 22:13:09 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序上拉触底加载更多数据

本文探讨了在小程序中如何优雅地处理数据加载与展示的问题，包括使用html、wxss和js实现数据暂无提示及加载更多的功能。通过具体代码示例，详细介绍了如何根据数据长度显示不同的提示信息，以及如何在数据加载完毕后正确更新视图。

1 html

<view class="no-data" wx:if="{{list.length == 0&&no}}">暂无数据~</view>
<view class="no-data" wx:if="{{list.length > 0&&!fot}}">我是有底线的~</view>

2 wxss

.no-data{text-align: center; font-size: 24rpx;color: #666;margin: 170rpx 0 30rpx;}

3 js

data: {
	list: [],
	page: 1,
	fot: true,
	no: false,
}

  integralDetails: function() {
        let that = this;
        let page = that.data.page;
        index.integralDetails(page, (res) => {
              wx.hideLoading()
              let list = that.data.list;
              list = list.concat(res.data)
              if (!res.errno){ //判断条件可根据实际情况添加
                    if (res.data.length > 0) {
                          that.setData({
                                list: list,
                                fot: true,
                                no: false
                          })
                    } else {
                          that.setData({
                                page: page == 1 ? 1 : page - 1,
                                fot: false,
                                no: true
                          })
                    }
              }
        })
  },

  onHide: function () {
        this.setData({
              fot: true,
              page: 1,
              list: []
        })
  },

  // 加载更多
  onReachBottom: function () {
        if (this.data.fot) {
              wx.showLoading({
                    title: '正在加载'
              })
              var page = this.data.page;
              page++;
              this.setData({
                    page: page,
              })
              this.presenDetails()
        } else {
              return
        }
  }