vue 项目实现下拉加载

场景：vue 网站手机端适配，需要实现拉到底部加载下一页的效果。

方法一：浏览器监听函数

浏览器加载到底部监听
1）data相关参数
 

      // 展示的数据
      tableData: [],
      // 总数据量 默认为 0
      pageTotal: 0,
      // 当前页 默认是第一页
      currentPage: 1,
      // 每页大小 默认每页10条数据
      pageSize: 10,

2）核心方法

watchScroll() {
      const self = this
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      const clientHeight = document.documentElement.clientHeight
      const scrollHeight = document.documentElement.scrollHeight
      if (scrollTop + clientHeight >= scrollHeight) {
        self.currentPage += 1 //到了底部，当前页面值+1
        self.fetchData(true) //加载数据函数
      }
    },

 // 初始数据获取
    fetchData(sign) {
      // sign 有内容则证明为加载到底部，需要拼接，其他情况则 直接代替，如刷新，查询等不需要加参数，直接fetchData()使用
      const self = this
      const data = {
        ...//你的接口参数
      }


      listget(data).then((response) => {
        this.pageTotal = response.data.total + this.pageTotal
        if (response.data.list.length > 0) { //有数据，则把数据加到现有页面上
          if (sign) {
            response.data.list.forEach((item) => {
              this.tableData.push(item)
            })
          } else {
            this.tableData = response.data.list
          }
        } else {
          self.currentPage -= 1 //当前页回退一下
          self.$message.warning('到底了') //没有消息，出来调试，这种也可以用页面底部展示内容表示
        }
      })
    },

3) 页面监听

created() {
    window.addEventListener('scroll', this.watchScroll)
},

方法二 使用elementui 自带的无限滚动（这个我没试，但是理论上可以实现）

<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script>
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      load () {
        this.count += 2
      }
    }
  }
</script>