Vue

VUE指令:无限上拉加载更多插件

前言

VUE指令:无限上拉加载更多插件

无限上拉加载更多,在很多场景都有使用,无论是PC还是移动端,尤其是移动端,都应用非常广泛,比如掘金、头条等。
都知道,无论是下拉,亦或是上拉,都是基于滚动条的位置而言的,如果滚动条触底,表示需要加载更多了,而触顶,再次下拉,表示刷新。看个简单的代码示例:

let list = []
let pageSize = 10
let pageNo = 1
// 刷新
function refresh(){
  list = []
  pageNo = 1;
  loadMore()
}
// 加载更多
function loadMore(){
  for(let i = (pageNo - 1) * 10 + 1; i <= pageNo * pageSize; i++) {
    list.push(i)
  }
  pageNo++
  console.log(list)
}

loadMore()
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
loadMore()
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
...

refresh()
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

这里简单模拟了一个分页,pageNo当前页码,pageSize每页大小。下面我们来具体实现vue如何通过指令来完成无限上拉加载更多功能的。

InfiniteScroll.js

v-infinite-scroll指令,主要来监听添加指令元素的滚动事件,根据条件,来执行加载更多事件

export default {
  bind(el, binding) {
    let target = el;
    if (el.getAttribute('data-scrollTarget')) {
      target = el.querySelector(el.getAttribute('data-scrollTarget'));
    }
    target.addEventListener('scroll', e => {
      const busy = el.getAttribute('data-infiniteScrollDisabled') ? false : true;
      const distance = el.getAttribute('data-infiniteScrollDistance')
        ? Number.parseInt(el.getAttribute('data-infiniteScrollDistance'), 10)
        : 100;
      if (!busy && e.target.scrollHeight - (e.target.scrollTop + e.target.clientHeight) < distance) {
        el.setAttribute('data-infiniteScrollDisabled', true);
        binding.value(e);
      }
    });
  },
};

InfiniteScrollDisabled.js

v-infinite-scroll-disabled指令,用来控制是否可以加载更多,比如正在加载,此时就不需要重复执行了

export default {
  bind(el, binding) {
    el.setAttribute('data-infiniteScrollDisabled', binding.value);
  },
  update(el, binding) {
    el.setAttribute('data-infiniteScrollDisabled', binding.value);
  },
};

InfiniteScrollDistance.js

v-infinite-scroll-distance指令,用来控制满足触底距离,不一定非得完全触底才加载更多,比如距离底部还有10px,就可以加载更多了

export default {
  bind(el, binding) {
    el.setAttribute('data-infiniteScrollDistance', binding.value);
  },
  update(el, binding) {
    el.setAttribute('data-infiniteScrollDistance', binding.value);
  },
};

挂载指令index.js

import InfiniteScroll from './InfiniteScroll';
import InfiniteScrollDisabled from './InfiniteScrollDisabled';
import InfiniteScrollDistance from './InfiniteScrollDistance';

export default {
  install(Vue, options) {
    const directives = {
      InfiniteScroll,
      InfiniteScrollDisabled,
      InfiniteScrollDistance
    };
    Object.keys(directives).forEach(key => {
      directives[key].$options = options;
      Vue.directive(key, directives[key]);
    });
  },
};

指令使用

<template>
  <div
    class="list" 
    v-infinite-scroll="loadMore"
    v-infinite-scroll-disabled="loading"
    v-infinite-scroll-distance="10"
  >
    <div v-for="item in list"></div>
  </div>
</template>
<script>
import Vue from 'vue'
import scroll from '@/plugs/scroll'
Vue.use(scroll)

export default {
  data () {
    return {
      loading: false,
      list: []
    }
  },
  methods: {
    loadMore () {
      this.loading = true
      xxx.then((data)=>{
        this.list = this.list.concat(data)
        this.loading = false
      }, ()=>{
        this.loading = false
      })
    }
  }
}
</script>

切记:添加指令的元素一定要有滚动条,没有滚动条,一切都是扯淡

这样就简单的实现了,vue无限下拉加载更多插件。当然,你还可以对齐进行美化,加载更多时,可以添加loading样式。比如:

<div
  class="list" 
  v-infinite-scroll="loadMore"
  v-infinite-scroll-disabled="loading"
  v-infinite-scroll-distance="10"
>
  <div v-for="item in list"></div>
  <div v-if="loading">loading...</div>
</div>
(67)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注