微信小程序上拉加载

微信小程序中上拉加载有两种方式：1、通过scroll-view标签 2、内置的生命周期函数onReachBottom

（一）scroll-view标签

wxml

​
<scroll-view scroll-y style="width:100%;height:calc(100vh - 116rpx);" bindscrolltolower="loadMore"><-- 一定要注意高度的设置 -->
    <block wx:for="{{list}}" wx:key="{{item.id}}">
      <view class="lawItem">
        <text class="lawTitle">{{item.title}}</text>
        <text class="lawDate">{{item.date}}</text>
      </view>
    </block>
  </scroll-view>

​

js

/**
   * 加载更多
   */
  loadMore() {
    let _this = this;
    if (!_this.data.isEmpty) {
      _this.setData({
        currentPage: _this.data.currentPage++
      })
      _this.getData();
    }
  },
  /**
   * 获取信息列表
   */
  getData() {
    let _this = this;
    let params = {}
    wxRequest('', params, 'POST', 'loading').then(res => {
      if (res.data.status == 1) {
        if (JSON.stringify(res.data.data) != '[]') {
          _this.setData({
            list: [...list, ...res.data.data]
          })
        } else {
          _this.setData({
            isEmpty: true  //isEmpty默认为false
          })
        }
      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    })
  },

（二）利用onReachBottom生命周期回调(这种方法适用的情况比较少，更多的是使用scroll-view)

参考监听上拉触底事件