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

最新推荐文章于 2024-03-14 06:00:00 发布

HXH_csdn

最新推荐文章于 2024-03-14 06:00:00 发布

阅读量472

点赞数

文章标签：小程序上拉触底加载更多数据

本文链接：https://blog.csdn.net/HXH_csdn/article/details/103381451

版权

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