微信小程序分页做下拉刷新

用到scroll-view做下拉，wxml代码如下：

 <scroll-view scroll-y lower-threshold="100" bindscrolltolower="scrollToLower" style="height: calc(100vh - 220rpx);" scroll-top="{
   
   {myScrollTop}}">
    <view wx:for="{
   
   {memberList}}" wx:key="index">
      <view class="name">{
   
   {item.name}}</view>
    </view>
 </scroll-view>

js代码如下：

  data: {
    list:[]
    noMore:false, // 是否还有数据
    isPage:false, // 是否还有下一页
    page: 1, // 默认页
    size: 10, // 默认每页10条数据
    myScrollTop:'' // 滚动条的位置
  },

进入页面首次获取数据

 onLoad: function (options) {
   this.getList()
 }

获取并处理数据

  getList(isPage) { // 首次调用的时候没有传参isPage为undefined
    if(isPage) { // 滑到下一页时isPage为true
      this.data.isPage = isPage
    } else { // 只加载第一页时isPage为false，并且page重置为1
      this.data.isPage = false
      this.setData({page:1})
    }
    let data = {}
    data.page = this.data.page
    data.size = this.data.size
    getListInfo(data).then(res => {
      if (res.data.code === 1) {
        if(this.data.isPage) { // 有下一页时，要展示的数据为已加载出来的合并下一页获取的数据
           this.setData({
             list: this.data.list.concat(res.data.data.content)
           })
         } else { // 只有一页时直接获取数据展示
           this.setData({
             list: res.data.data.content,
             myScrollTop:0 // 滚动条的位置重置为顶部
           })
         }
         // 当某页获取的数据条数小于一页的大小时表示已经是最后一页
         if(res.data.data.content.length < this.data.size)) { 
           this.setData({noMore: true,page:1}) // noMore重置为true表示后面没有数据了
         } else {
         	// 否则还有数据可以下拉加载下一页
           this.setData({noMore:false})
         }
      } else {
        wx.showToast({
          title: res.data.msg,
          icon: 'none'
        })
      }
    });
  },

到达一页的底部下拉刷新

  scrollToLower: function (e) {
    if (!this.data.noMore){ // 还有数据的时候才会请求下一页
      this.setData({ page: this.data.page + 1})
      this.getList(true); // 调用方法获取下一页的数据，参数传true表示还有下一页
    } 
  },