扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
¥{{value.price}}
js
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;
var arr = [];
//限制获取数据量
for(var i=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=>{
var arr = [];
//限制获取数据量
for(var i=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();
}, 以上是“怎么使用vue实现分页加载效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网