微信小程序实现下拉到底部加载数据

背景：最近在做个类似于美团的小程序，正好遇到了这种需求，记录下。
思路：思路其实挺简单的，就是监听滚动条滚动事件，判断到了底部的时候，数据的一个累加，要实现这种功能接口需支持分页功能
话不多说，直接上代码：

1、html页面

 <view class="businessList">
    <view class="businessList-title">附近优选商家</view>
    <view class="businessList-item" wx:for="{{businessList}}" wx:key="index" data-merchantId="{{item.merchantId}}" bindtap="toStoreDetails">
      <view class="item-image-box">
        <image class="item-image" src="{{item.shopViewUrl}}"></image>
      </view>
      <view class="item-content">
        <view class="item-name">{{item.brandName}}{{index}}</view>
        <view class="item-desc">
          <view class="item-desc-detail">{{item.className}}</view>
          <view class="item-desc-detail">{{item.tradingAreaName}}</view>
        </view>
        <view class="item-other">
          <view>
            <view class="item-other-grade">{{item.appraisePoints}}分</view>
            <view class="item-other-num">月销{{item.monthlySales}}</view>
          </view>
          <view class="item-other-distance">{{item.distance}}m</view>
        </view>
      </view>
    </view>
  </view>
  <view wx:if="{{isMore}}">加载中</view>
  <view wx:if="{{noMore}}">没有更多了</view>

2、js页面
监听屏幕滚动的方法可参考：https://blog.csdn.net/qq_38194393/article/details/89282842
判断到底部的思路：
拿到屏幕包含滚动看不见的地方的整体的高度 - 可见区域高度 = scrollTop高度

data:{
	pageNum:0, // 页码，第一页
	pageSize:10,
	businessList:[],  // 列表数据
    allHeight:null, // 整个屏幕高度（包含不可见区域）
    clientHight:null, // 可见区域屏幕高度，不包含滚动条折叠不可见区域
    isMore:false,  // 加载中
    noMore:false,  // 没有更多了
    gap:null,   // 第二次后者更后面计算整个高度的时候（包含不可见区域）会有误差，需要加上这个误差
    num:0
}
// 获取列表数据，这里是封装好的请求
  getStoreList:function(latitude,longitude){
    const that = this
    axios({
      url:'/merchant/merchantShop/list',
      method:'POST',
      data:{
        pageNum:that.data.pageNum,
        pageSize:that.data.pageSize
      }
    }).then(res =>{
      if(res.data.code === 0){
          const businessList = that.data.businessList
          if(res.data.data.list.length>0){
            res.data.data.list.forEach(item=>{
              businessList.push(item)
            })
          }else{
           // 当每次累加页码查出来无数据时，需设置展示“”“没有更多了”
            that.setData({
              noMore:true
            })
          }
          that.setData({
            businessList: businessList,
            isMore:false
          })
          that.pageScrollToBottom() //调用获取屏幕整个高度（包含不可见区域）的方法
      }else{
        wx.showToast({
          title: res.data.msg,
          icon:'none'
        })
      }
    }).catch(error=>{
      wx.showToast({
        title: error,
        icon:'none'
      })
    })
  },
  // 获取屏幕总高度（包含不可见区域）
   pageScrollToBottom: function () { 
      const that = this
      wx.createSelectorQuery().select('#home').boundingClientRect(function (rect) {
      	// 计算第一次的差值，这时候才能算出真正的高度，第二次及以后bottom的值不正确
        if(that.data.num===0){
          const gap = rect.bottom-rect.height
          that.setData({
            gap:gap
          })
        }
        const num = that.num+1
        that.setData({
          num:num
        })
      that.setData({
        allHeight:rect.height+that.data.gap  // 
      })
    }).exec()
  },
  // 监听屏幕滚动事件，只要屏幕往上或者往下滚动都会触发此方法
  onPageScroll: function(e){
    if(this.data.allHeight-this.data.clientHight===e.scrollTop){   // 判断是否滚动动到底部
      if( !this.data.noMore ){
        const pageNum = this.data.pageNum +1
        this.setData({
          isMore : true,
          pageNum:pageNum
        })
        this.getStoreList(app.globalData.latitude,app.globalData.longitude)
      }
    }
  },
  onLoad: function () {
  	// 获取可见区域高度
	 wx.getSystemInfo({
       success: function(res) {
        that.setData({
          clientHight:res.windowHeight
        })
      },
    })
}