vue 项目实现下拉加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了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) 页面监听文章来源地址https://www.toymoban.com/news/detail-782835.html

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>

到了这里，关于vue 项目实现下拉加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！