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

Javanx

发布于 2019-12-10 17:32:44

3.5K0

发布于 2019-12-10 17:32:44

文章被收录于专栏：web秀

前言

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

vue.js

登录后参与评论

0 条评论

热度