下拉加载列表

下拉加载功能是非常常见的功能，简单写一下自己的轮子
vue里data定义需要用到五个属性

data() {
    return {
      list: [], // 拿到存放的list
      page: 1,  // 页数
      more: true, // 是否加载一个控制，避免重复触发
      nomore: false,  // 已加载完，不再请求
      times: true // 触底加载完通知
    }
  }

在mounted里监听scroll，destroyed里销毁

  mounted() {
    window.addEventListener('scroll', this.onSrcoll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.onSrcoll)
  }

接口的写法

getMoneyHis() {
      getMoneyh(this.page).then(res => {
        // 只传递page，默认拿取十条
        if(res.data.errorCode === '0') {
          if(res.data.data.list.length < 10) {
            this.nomore = true  // 如果这次拿回不足10条就表示后面没有了
          }
          this.list = [...this.list, ...res.data.data.list] // 这里直接合并数组
        }
      })
    },

滚动条触发方法

onSrcoll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop  // 距离头部距离
      var getWindowHeight = document.documentElement.clientHeight || document.body.clientHeight  // 页面的高度
      var documentScrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight  // 总距离

      if (scrollTop + getWindowHeight === documentScrollHeight && this.nomore) {
        if(this.times) {
          Toast('没有更多数据了') // 触底提示
          this.times = false
          setTimeout(() => {
            this.times = true // 把时间打开，不一直提示
          }, 60000)
        }
        return
      }

      if(scrollTop + getWindowHeight >= (documentScrollHeight-500)) {
        if(!this.more) return
        this.more = false
        if(this.nomore) return
        this.page += 1
        this.getMoneyHis()
        setTimeout(() => {
          this.more = true // 发请求的间隙
        }, 500)
      }

    }