vue-infinite-scroll 实现无限滚动

2020-12-28

引言

在 Web 中，无限加载是必需的一项功能，大部分流行的插件都是基于 jQuery 的，好在找到一个 vue-infinite-scroll 插件。于是开始了 vue-infinite-scroll 的踩坑。

1.安装

1	npm install vue-infinite-scroll --save

2.载入

在 main.js 文件中

1
2
3

// 无限加载
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.使用

<div v-infinite-scroll="loadMore"
           infinite-scroll-throttle-delay="500"
           infinite-scroll-disabled="busy"
           immediate-check="false"
           infinite-scroll-distance="50">
  <ul>
    <li v-for="(item, key) in list" :key="key">{{item}}</li>
  </ul>
</div>

data () {
    return {
      list: [],
      busy: false,
      page: 0,
      total: 0,
      params: {
        current: 1,
        size: 10
      }
    }
  }

methods: {
   loadMore: function () {
     this.busy = true
     setTimeout(() => {
       // 当前页数如果小于总页数，则继续请求数据，如果大于总页数，则滚动加载停止
       if (this.params.current < this.total) {
         //  这里是列表请求数据的接口,在这个接口中更新总页数
         this.getData(this.page)
       } else {

       }
       this.busy = false
     }, 1000)
   },
   getData (data) {
     this.params.current = data
     this.$api.exam.examIndex(this.params).then(res => {
       this.log(res.data)
       if (res.data.code === 200) {
         this.busy = false
         // 总条数
         this.total = res.data.page.total
         // 页数递增
         this.page++
         const list = res.data.list
     })
   }
 }

v-infinite-scroll=”loadMore” : 表示回调函数是 loadMore
infinite-scroll-throttle-delay=”500”: 检查 busy 的值的时间间隔，默认值是 200 ，因为 vue-infinite-scroll 的基础原理就是，vue-infinite-scroll 会循环检查 busy 的值，以及是否滚动到底，只有当：busy 为 false 且滚动到底，回调函数才会执行。
infinite-scroll-disabled=”busy”: 表示由变量 busy 决定是否执行 loadMore ， false 则执行 loadMore ， true 则不执行
immediate-check=”false”: 默认值 true ，表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。
infinite-scroll-distance=”50”: 距离页面底部多少像素时，执行 loadMore 函数

官方文档

展开全文 >>