vue-infinite-scroll------vue的无线滚动插件
vue-infinite-scroll------vue的无线滚动插件博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!说明Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现,这是我看到的最霸气的一句好,就冲着这个来官方GitHub地址https://github.com/ElemeFE...
·
vue-infinite-scroll------vue的无线滚动插件
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
说明
Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现,这是我看到的最霸气的一句好,就冲着这个来
官方GitHub地址
https://github.com/ElemeFE/vue-infinite-scroll
下载
到项目的目录下执行次命令
cnpm install vue-infinite-scroll --save
使用
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
加载中 //可以放置动态的加载效果
<img src="./../assets/loading-spinning-bubbles.svg" v-show="loading">
</div>
<script>
var count = 0;
new Vue({
el: '#app',
data: {
data: [],
busy: false
},
methods: {
loadMore: function() {
this.busy = true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: count++ });
}
this.busy = false;
}, 1000);
}
}
});
</script>
感谢
vue-infinite-scroll
万能的互联网
以及勤劳的自己
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献4条内容
所有评论(0)