本文实例讲述了Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能。分享给大家供大家参考,具体如下:
1、分页
商品列表的分页实现是后台根据前端请求的页面大小、页码位置,去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据。
实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分。当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中。通过vue-infinite-scroll插件实现滚动加载,在框架末尾插入加载div,并且可以在其中放入加载动画
//加载的矢量动画
通过busy可以控制是否启用加载,在loadMore函数中定义你的加载操作,然后通过setTimeout按时间间隔响应加载请求
new Vue({
el: '#app',
data: {
data: [],
busy: false //一开始不用加载
},
methods: {
loadMore(){ //滚动加载操作
this.busy = true;
setTimeout(() => {
this.page++;
this.getGoodsList(true);
}, 1000);
}
}
});
2、排序