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

客官°小女子只卖身不卖艺 2023-06-19 02:28 42阅读 0赞

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