微信小程序使用scroll-view，实现分页加载和下拉刷新

bindscrolltolower="lower"   分页加载

bindrefresherrefresh="fresh"   下拉刷新

refresher-enabled="true"   开启自定义下拉刷新

refresher-triggered="{{triggered}}"  设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发，是动态控制的（开始的时候不知道，定义了其他变量freshOrNot做的控制…后来也没修改反正是）

页面代码示例如下：

.wxml

<scroll-view class="slideContent" 
   style="height:{{carsHeight}}rpx"
   scroll-y="true"
   bindscrolltolower="lower"
   bindrefresherrefresh="fresh"
   refresher-enabled="true"
   refresher-triggered="{{triggered}}">
  ----放置请求信息----
</scroll-view>

.js文件

因图片是其他接口返回，没有同人员列表一起返回，所以做的promise，没有可以忽略。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    carsHeight: 0, //列表滚动区高度
    drivers: [], //列表数据
    keyWord: '', //模糊查询
    pageNum: 1, //初始页数
    pageSize: 10, //初始条数
    stopLoadMoreTiem: false, //阻止多次触发上拉刷新需要的变量（是否分页）
    triggered: true, //是否开始自定义下拉刷新（）
    freshOrNot: 1, //当分页和下拉加载一同进行时，是否允许下拉加载 1默认下拉可加载，0不可加载
    addDriversOrNot: 1, //当分页和下拉加载一同进行时，是否允许数据累加 1累加 0不累加
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

    //获取视口高度
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        // 获取可使用窗口宽度
        let clientHeight = res.windowHeight;
        // 获取可使用窗口高度
        let clientWidth = res.windowWidth;
        // 算出比例
        let ratio = 750 / clientWidth;
        // 算出高度(单位rpx) - 固定元素的高度滚动区高度
        let carsHeight = clientHeight * ratio - 78 - 60;
        that.setData({
          carsHeight: carsHeight,
        })
      }
    });
    //页面初始数据
    this.getSelectIdleDrivers()
  },

  //处理子组件获取的值，返回给办公车申请页
  manChoise(e) {
    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2]; //上一个页面
    //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
    prevPage.setData({
      'tripInformation.driverNo': e.detail.jobno,
      'tripInformation.driverName': e.detail.name,
      'tripInformation.driverMobile': e.detail.mobileno
    })
    wx.navigateBack({ //返回
      delta: 1
    })
  },

  //模糊查询
  searchValue: tool.debounce(function (e) {
    console.log(e.detail, '模糊查询')
    this.setData({
      keyWord: e.detail,
      pageNum: 1,
      pageSize: 10,
      drivers: [],
      addDriversOrNot: 0
    })
    //调用接口
    this.getSelectIdleDrivers()
  }),

  //查询人员接口
  getSelectIdleDrivers() {
    let that = this
    that.setData({
      stopLoadMoreTiem: true
    })
    let data = {
      keyWord: that.data.keyWord,
      pageNum: that.data.pageNum,
      pageSize: that.data.pageSize
    }
    let driverList;
    let reqState;
    //请求人员列表
    const promiseOne = () => {
      return getSelectIdleDrivers(data)
    }
    promiseOne()
      .then(res => {
        //数据少于10条时，即请求到了最后一页
        driverList = res.data.drivers;
        if (driverList.length < 10) {
          //记录请求状态，把reqState传值给flag
          reqState = false;
        } else {
          reqState = true;
        }
        //为下一页的请求参数做准备
        let nextPage = that.data.pageNum + 1;
        if (this.data.addDriversOrNot === 0) {
          that.setData({
            drivers: driverList,
            pageNum: nextPage,
            stopLoadMoreTiem: reqState
          })
        }else{
          that.setData({
            drivers: that.data.drivers.concat(driverList),
            pageNum: nextPage,
            stopLoadMoreTiem: reqState
          })
        }
        // 请求人员对应的图片接口，进行存放
        const promiseArr = [];
        driverList.forEach((item) => {
          if (!!item.icon && item.icon.length !== 0) {
            promiseArr.push(
              getImage(item.icon)
            )
          } else {
        // 没有图片链接也要给个占位，不然图片就串了
            promiseArr.push('')
          }
        })
        // 请求图片接口并将图片存入人员列表中
        let tempList = that.data.drivers
        Promise.all(promiseArr).then((newRes) => {
          driverList = driverList.map((item, index) => {
            tempList.forEach((temItem) => {
              if (temItem.jobNo === item.jobNo) {
                temItem.imgBase = newRes[index]
              }
            });
            return {
              ...item,
              imgBase: newRes[index]
            }
          })
          that.setData({
            drivers: tempList,
            freshOrNot: 1
          })
        })
      })
  },

  //上拉加载  tool.debounce是封装的节流函数
  lower: tool.debounce(function () {
    //分页加载和下拉刷新速度太快时，禁止下拉刷新
    this.setData({
      freshOrNot: 0,
      addDriversOrNot: 1
    })
    //调用请求网络接口 + 数组叠加
    this.getSelectIdleDrivers();
  }),

  //自定义下拉刷新
  fresh() {
    this.setData({
      pageNum: 1,
      pageSize: 10,
      keyWord: '',
      drivers: [], //刷新时行程列表数据清空
      triggered: false,
      addDriversOrNot: 0
    })
    if (this.data.freshOrNot === 1) {
      //调接口查询 加不加setTimeout都可以，防止再次异步的。
      setTimeout(() => {
        this.getSelectIdleDrivers()
      }, 0)
    }
  },

})