如何实现Vue底部按钮点击加载更多
时间:2019-11-08
本文章向大家介绍如何实现Vue底部按钮点击加载更多,主要包括如何实现Vue底部按钮点击加载更多使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 一次请求
1.1 页面
使用slice来进行限制展现从0,a的数据:
```
//判断a的值是否小于数组的长度,小于就显示点击加载更多
没有更多了
1.2 data
在data中定义a的数值:
data() { return { a: 20 }; }
1.3 methods
在methods定义loadMore方法:
methods: { loadMore: funcution() { this.a += 20; } }
分布请求
2.1 页面
2.2 data
data() { return { page: 1, page_count: '' }; },
2.3 methods
在methods定义loadMore方法:
loadMore: function() { this.page += 1; this.getDrawPrize({ current_page:this.page //请求页数 }) .then(ret => { console.log(ret.data.code_result) this.code_result = this.code_result.concat(ret.data.code_result); //将请求回来的数据和 上一次进行组合 }) .catch(err => { this.$toast.fail("系统开小差,请重试"); }); },