微信小程序之下拉触底时加载下一页 下拉加载更多

html:

<scroll-view class='dataContainer' scroll-y="{{true}}" bindscrolltolower="nextDataPage">
      <block wx:for="{{tuijlpList}}" wx:key="index">
            <view >数据：{{item.data}}</view>
      </block>
      <view class="morelp">
      	{{ nomore ? "没有更多了" : "正在加载..." }}
      </view>
      <view class='bottomline' wx:if="{{tuijlpList.length == 0}}" >暂时没有数据</view>
</scroll-view>

js:

data: {
	area_id: "",
    nomore: 0,
    tuijlpList: [],
    isLoadInterface: false,
    pagecount: 1,
    page: 1,
  },
  //查询数据列表
  mgetLoupanList: function () {
    let parmas = {
      area_id: this.data.area_id,
      page: this.data.page
    }

    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 () {
    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("没有更多了");
      }      
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.mgetLoupanList();
  }

思路：以小程序标签scroll-view作为列表容器，容器方法bindscrolltolower来触发下一页加载

页面onload后执行第一页，非第一页的数据用concat方法拼接之前的数据

防止接口未执行完反复触发bindscrolltolower里的方法，用一个变量isLoadInterface来截断

接口的数据中应有islast这类是否最后一页的参数，用来判断是否加载全部数据

借鉴文章：
微信小程序之下拉触底时加载下一页：https://www.cnblogs.com/nanyang520/p/11199719.html