使用vue之directive设计列表加载更多

 

背景

　　之前写过一篇《纯JS实现加载更多（VUE框架）》，它的逻辑思路比较清晰易懂，而今天看了一天公司项目的部分功能代码，发现同事们写的加载更多的功能更加的有趣，而且易于封装到一个组件当中，便于日后的重用。

 

 

思路

　　同样是检测滚动，然后计算可滑动高度、滑动高度、屏幕高度然后计算什么时候可以向后台请求数据，加载数据。而不同的是这次结合了vue.js中的全局API之Vue.directive（自定义指令，关于它的知识，官网上面已经写得很清晰了），创建一个自定义指令，类似于v-show这样的指令，然后直接挂到DOM那里，再写上参数，通过directive对应的钩子函数（注意，这里的全局api也有自己相对应的钩子函数哟），来为绑定了该自定义指令的DOM节点添加滑动事件。

 

 

动手吧

　　首先使用全局api  Vue.directive自定义自己的指令，取名为‘loadMore’，然后写下钩子函数inserted()、unbind()。

　　其中onScroll()函数是自定义方法，作用是实现滚动加载更多的功能。

　　inseted()钩子函数的作用是当被绑定元素插入父节点时，调用此钩子函数，为被绑定元素绑定监听滑动scroll的时间方法，一旦被绑定元素被监听到滑动，调用onScroll()函数实现加载更多。

　　unbind()钩子函数的作用是当指令与元素解绑时，调用该钩子（即退出页面或者程序时调用）

　　程序如下所示：

import Vue from 'vue';
Vue.directive('loadMore', {
  inserted(ele, data) {
    ele.addEventListener('scroll', data.def.onScroll.bind(null, data))
    console.log(data)
    console.log('inserted钩子函数被触发咯~~~')
  },
  unbind(ele, data) {
    ele.removeEventListener('scroll', data).def.onScroll.bind(null, data)
    console.log('解绑时调用！！！！')
  },
  onScroll(data, event) {
    let target = event.target;
    let loadMoreConfig = data.value;
    let screenHeight = target.offsetHeight;
    let scrollTop = target.scrollTop;
    let totalHeight = target.scrollHeight;
    if (!loadMoreConfig.loading && totalHeight > screenHeight && totalHeight - scrollTop - screenHeight < loadMoreConfig.scrollBottomOffset) {
      loadMoreConfig.onScrollBottom();
      loadMoreConfig.loading = true;
    }
  },
});

上面这段程序写在<script></script>里面，写在export default外面。

 

 

使用自定义指令

　　因为上面定义了一个指令，叫loadMore, 像v-show、v-if一样挂载DOM中，然后传需要的参数就可以了，如下

<pull-refresh :next="reloadNewKnowLedgeDataList" class="knowledge-list-container" v-load-more="newPageInfo.loadMoreConfig">……

 

　　上面传的参数是newPageInfo.loadMoreConfig，在data()里面，它是这样的

data() {
    return {
      newPageInfo: {
        isLoadedData: false,
        pageNo: 1,  // 第一页
        pageSize: 15, // 每一次加载的最大页数
        dataList: [],
        loadMoreConfig: {
          onScrollBottom: this.onScrollBottomForNewPage,  //调用加载的方法
          scrollBottomOffset: 20,  //距离底部门槛阈值
          loading: false //是否加载
        }
      }
}

　　看到了吗，因为之前在全局api directive里面自己定义的监听滑动后触发函数onScroll()，一旦触发它，函数就会调用this.onScrollBottomForNewPage()方法来加载数据

 

接着上面按逻辑执行

 

onScrollBottomForNewPage() {
      this.newPageInfo.pageNo += 1;
      this.queryNewKnowLedgeDataList();
},

queryNewKnowLedgeDataList(callback) {
      this.loading(true);
      this.queryKnowLedgeDataMethod('new').then((res) => {
        if (callback && typeof callback === 'function') {
          callback();
        }
        this.newPageInfo.isLoadedData = true;
        this.loading(false);
        this.processNewKnowLedgeData(res);
      }, (error) => {
        if (callback && typeof callback === 'function') {
          callback();
        }
        this.loading(false);
        this.newPageInfo.loadMoreConfig.loading = true;
        this.newPageInfo.isLoadedData = true;
        if (error !== null) {
          this.$vux.toast.show({ text: '数据加载失败', type: 'text' });
        }
      });
},

queryKnowLedgeDataMethod(type) {
      let params;
      if (type === 'new') {
        params = {
          'pageNo': this.newPageInfo.pageNo,
          'pageSize': this.newPageInfo.pageSize,
          'findType': 0
        };
      } else {
        params = {
          'pageNo': this.hotPageInfo.pageNo,
          'pageSize': this.hotPageInfo.pageSize,
          'findType': 1
        };
      }
      return this.$http.get('rule/findRuleNewOrHotList', { 'params': params });
},

processNewKnowLedgeData(res) {
      if (!res) {
        return;
      }
      if (res.data && res.data.length > 0) {
        if (this.newPageInfo.pageNo === 1) {
          this.newPageInfo.dataList = res.data;
        } else {
          this.newPageInfo.dataList = this.newPageInfo.dataList.concat(res.data);
        }
        this.newPageInfo.loadMoreConfig.loading = false;
      } else {
        this.newPageInfo.loadMoreConfig.loading = true;
        if (this.newPageInfo.pageNo === 1) {
          this.newPageInfo.dataList = [];
        } else {
          this.$vux.toast.show({ text: '没有更多', type: 'text' });
        }
      }
},