vue实现分页加载效果
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了vue实现分页加载效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue分页加载的具体代码,供大家参考,具体内容如下
HTML
<!-- 商品 页数--> <div class="pagenavi"> <div class="all-number"> <span>共{{data.length}}个商品</span> </div> <p class="pageArea" data-countpage="1"> <span class="colf22e01 fontT">{{pages}}</span> / <span class="page_count fontT">{{total}}</span> </p> </div> <div class="clear-b"></div> </div> <!--限制加载数量--> <ul class="cata_choose_product clearfix"> <!--渲染数据 从那个下标开始加载--> <li v-for="(value,index) in data" v-if="index < 5"> <div class="nosinglemore"></div> <div class="listbox clearfix"> <div class="listPic"> <router-link target="_blank" to="/goods_detail"> <img :src="value.image" class="fn_img_lazy"> </router-link> </div> <div class="listDescript"> <router-link target="_blank" to="/goods_detail" class="text13">{{value.name}}</router-link> </div> <div class="cat-shopprice lf"> <p><span>¥{{value.price}}</span></p> </div> <div class="cat-addcart lf"> <div class="cart_wrapper"> <router-link target="_blank" to="/goods_detail">查看详情</router-link> </div> </div> <div class="clear-b"></div> </div> </li> <div class="clear-b"></div> </ul> <!--分页器--> <div class="box"> <div class="box_one"> <div @click="shan">上一页</div> <!--动态生成页数标签--> <div class="box_cen"> <div v-for="(value,index) in total" class="box_foot"> <span @click="yesu" :id="index">{{index+1}}</span> </div> </div> <div @click="xia">下一页</div> </div> </div>
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<this.initial;i++){ //加载数据 页数+数量 arr.push(res.data.goods[0].foods[this.num+i]); } this.data = arr; this.total = Math.ceil(this.Total/this.data.length); }).catch(err=>{ 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<this.initial;i++){ //判断数据是否有undefined,有undefined会报错无法加载 if(res.data.goods[0].foods[this.num+i] != undefined) arr.push(res.data.goods[0].foods[this.num+i]); } this.data = arr; }).catch(err=>{ 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(); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:在JavaScript中实现链式调用的实现
下一篇:微信小程序如何获取地址
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程