vue实现分页加载效果


Posted in Javascript onDecember 24, 2019

本文实例为大家分享了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();
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
JS中常用的消息框总结
Feb 24 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
微信小程序如何获取地址
Dec 24 #Javascript
浅析vue-router中params和query的区别
Dec 24 #Javascript
JavaScript实现英语单词题库
Dec 24 #Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 #Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 #Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 #Javascript
javascript实现鼠标点击生成文字特效
Dec 24 #Javascript
You might like
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
Python PO设计模式的具体使用
2019/08/16 Python
python 实现生成均匀分布的点
2019/12/05 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
文秘专业大学生求职信
2013/11/10 职场文书
个人贷款承诺书
2014/03/28 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
保安辞职信范文
2015/02/28 职场文书
工地材料员岗位职责
2015/04/11 职场文书
八月迷情观后感
2015/06/11 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Python中的变量与常量
2021/11/11 Python