为什么使用vue-infinite-loading呢?
开箱即用,简洁至上的 API、内置加载动画以及良好的兼容性,可立即投入生产!
简直不要太好用,接下来为大家演示如何使用:
首先安装插件
npm install vue-infinite-loading -S
注册全局,因为我用的地方挺多的,这样是为了避免重复注册,大家可以根据自己的实际情况来用
main.js
import InfiniteLoading from 'vue-infinite-loading'; //vue滚动插件
Vue.use(InfiniteLoading) //注册全局
核心模板
<ul v-for="(fault, $index) in faults">
…………
</ul>
<infinite-loading :identifier="infiniteId" @infinite="infiniteHandler">
<span slot="no-more" style="color: #7a7873;">
我也是有底线的:)
</span>
</infinite-loading>
export default {
data() {
return {
page: 1
params:{
areaId: -1,
stationId: -1,
startTime: this.startTime,
endTime: this.endTime,
sortField: 'faultStartTime',
sortOrder: 'desc',
pageIndex: this.pageIndex,
pageSize: 10
},
infiniteId: +new Date(),
};
},
methods: {
infiniteHandler($state) {
axios.get(api)
.then(({ data }) => {
if(_faults.length > 0){
if(this.page === 0){
this.faults= _faults;
} else {
for (var i = 0; i < _faults.length; i++) {
this.faults.push(_faults[i]);
}
}
this.pageIndex ++;
$state.loaded();
} else {
$state.complete();
}
});
},
getFaultList: function(s, e){
this.getDate(s, e);
this.pageIndex = 0;
this.faults = [{
id: 0,
faultStartTime: '',
equipmentName: '',
faultPropertyDesc: '',
protectActionCondition: [],
stadiometry: ''
}];
this.infiniteId += 1;
}
}
};
getFaultList方法是我的重置查询,业务逻辑:
点击A模块的查询——调用父模块的方法——再用父模块去调用B模块的getFaultList方法
这里就不多做讲解了,如果大家有这方面的需求留言告诉我,我可以在下个博文里告诉大家。
每当 identifier
属性发生变化的时候,该组件就会自行重设。
我们必须在清空列表之后再改变 identifier
属性,否则组件将可能无法在重设之后立即触发 infinite
事件。