微信小程序之上拉加载更多效果 scroll-view bindscrolltolower=“nextDataPage“ 方法

html

<scroll-view class="newhouseinfo" scroll-y="{{true}}" 
	bindscrolltolower="nextDataPage" 
	style="height:{{bodyH}}px">
	<view class="lptuijianbd">        
       <tem-tuijianlp tuijlpList="{{tuijlpList}}" nowurl="{{nowurl}}" areaid="{{area_id}}" />
       <view class="morelp">
         {{ nomore ? "没有更多了" : "正在加载..." }}
       view>
     view>
scroll-view>

css

.newhouseinfo {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .picbox {
    position: relative;
    width: 100%;
    height: 480rpx;
    overflow: hidden;
    }
}

js:

data: {
    nomore: 0,
    isLoadInterface: false,
    pagecount: 1,
    page: 1,
    tuijlpList:[],
    },
onLoad: function (options) {
	this.mgetLoupanList();
}),
mgetLoupanList: function () {
    let parmas = {
      area_id: this.data.area_id,
      page: this.data.page,
      category_area_id: this.data.category_area_id,
    }
    getLoupanList(parmas).then((res) => {
      // console.log(parmas);
      // console.log(res);
      this.setData({
        pagecount: Math.ceil(res.data.count / 10)
      })
      if (this.data.page == 1) {
        this.setData({
          tuijlpList: res.data.data,
          isLoadInterface: false
        })
      } else {
        this.setData({
          tuijlpList: [...this.data.tuijlpList, ...res.data.data],
          isLoadInterface: false
        })
      }
      // console.log(res);
      // console.log(this.data.page);
      // console.log(this.data.pagecount);
    })
  },
  
// 加载下一页数据
  nextDataPage: function () {
    // console.log("1");
    if (!this.data.isLoadInterface) { //防止在接口未执行完再次调用接口
      if (this.data.page * 1 + 1 <= this.data.pagecount) {
        this.setData({
          isLoadInterface: true,
          page: this.data.page * 1 + 1
        })
        this.mgetLoupanList();
      } else {
        //如果大于总页数停止请求数据
        this.setData({
          nomore: 1
        })
        // console.log("没有更多了");
      }
    }
  },