为了账号安全,请及时绑定邮箱和手机立即绑定

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

2019.12.05 14:43 3939浏览

前言

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

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消