前言

无限上拉加载更多，在很多场景都有使用，无论是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>