微客导航 » 文章资讯 » vue实现分页加载效果

vue实现分页加载效果

2023-08-04 01:03:05 270

本文实例为大家分享了vue分页加载的具体代码，供大家参考，具体内容如下

HTML




共{{data.length}}个商品

{{pages}} / {{total}}

¥{{value.price}}

查看详情

{{index+1}} 下一页

data(){
return{
data:"",//页面数据
num:0,
pages:1,//当前页数
priceQuery:false,//价格排序判断
Total:"",//总页数（向上取整）
initial:4,//默认加载数量
total:"",//最终页数
}
},
created(){
//获取初始数据
axios.get("'../../static/mock/data.json").then(res=>{
this.Total=res.data.goods[0].foods.length;
vararr=[];
//限制获取数据量
for(vari=0;i{
console.log(err);
});
},
methods:{
//下一页
xia(){
//页数++
if(this.pages==this.total){
this.pages=this.total;
}else{
this.pages++;
}
//从加载数据下标+数量
this.num=(this.pages-1)*this.initial;
this.sua();
},
//上一页
shan(){
if(this.pages==1){
this.pages=1;
}else{
this.pages--;
}
this.num=(this.pages-1)*this.initial;
this.sua();
},
//刷新数据
sua(){
axios.get("'../../static/mock/data.json").then(res=>{
vararr=[];
//限制获取数据量
for(vari=0;i{
console.log(err);
});
},
//页数选择
yesu(e){
//console.log(e.target.id);
this.num=(e.target.id)*4;
this.pages=Number(e.target.id)+1;
this.sua();
},

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue实现分页加载效果

热门推荐

随机推荐