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

时间:2021-03-09 11:43:27

背景

  之前写过一篇《纯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' });
}
}
},