Vue】自定义loadmore指令实现下拉加载更多

使用自定义指令loadmore，实现下拉加载更多。

首先是loadmore.js, el 为绑定的元素，通过el.scrollHeight - el.offsetHeight === el.scrollTop判断滚动条到达底部，这里引入了loadsash实现节流，以免每一次滚动到底部都加载数据（手抖或故意滚动），加入flag字段，控制首次触底后直接执行，后续的触底至少间隔一秒，不介意第一次会慢一点的可以直接在if语句内，调用fun()。

// loadmore.js
 
const _ = require('lodash');
export const loadMore = (el, binding) => {
    const fun = _.debounce(() => {
        binding.value();
    }, 1000);
    let flag = true;
    el.addEventListener('scroll', () => {
        if (el.scrollHeight - el.offsetHeight === el.scrollTop) {
            if (flag) {
                binding.value();
                flag = false;
            } else {
                fun();
            }
        }
    });
};
然后全局注册指令：

//main.js
 
import { loadMore } from './modules/loadmore';
 
Vue.directive('loadmore', { bind: loadMore });
最后在组件里使用

//组件内
 
<div class="list" v-loadmore="loadMoreData">
 
</div>
 
// methods
 loadMoreData() {
// 加载数据
     if (this.maxPage) return;// 判断是否到了最大页数，已是最大页数则不继续加载数据
      this.getData();
 },