vue-cli4上拉加载更多

第一步： 大体框架类似（里面也可以加加载状态，因为我们有lodding的判断）

  <div class="helloword">
    <ul>
      <li v-for="item in list" :key="item.id" v-text="item.name ? item.name : '-- --'"></li>
    </ul>
  </div>

第二步： 在data中定义loding: false和list:[]

  data () {
    return {
      lodding: false,
      page: 1, // 分页（size: 10直接写在请求里面）
      searchs: '',
      list: []
    }
  }

第三步：初始化实例时挂载请求

  mounted () {
    this.getlist(this.searchs, this.page, '', '', '')
    window.addEventListener('scroll', this.scrllos)
  }

第四步：scroll监听事件和getlist请求事件

  methods: {
    getlist (q, page, zczb, clsj, hymc) {
      compansearch(q, page, zczb, clsj, hymc).then(res => {
        this.list = dates.content
        this.total = dates.total
      })
    },
    scrllos () {
      // 当前可视高度
      const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      // 获取内容向上滚动了多少距离
      const domScrollTop = document.body.clientHeight || document.querySelector('.helloword').clientHeight
      // 当内容滚动到距离底部<50时,且没有加载完成
      // 内容距离底部多少距离 = 内容总高度-滚动高度-当前可视高度
      if (this.$el.scrollHeight - domScrollTop - scrollTop < 50 && !this.liststatus) {
        // 设置为正在加载中
        this.liststatus = true
        setTimeout(() => {
          if (this.list.length < this.total) {
            this.page++
            compansearch(this.searchs, this.page).then(res => {
              this.list = [...this.list, ...res.data.content]
              this.total = res.data.total
              this.liststatus = false
            })
          }
        }, 300)
      }
    }
  }

最后一步：清除scroll监听事件，必须的，不然去奇特页面还会有请求存在，vue是单页面应用嘿嘿嘿

destroyed () {
    window.removeEventListener('scroll', this.scrllos)
}

随笔 留记......