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 ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
微信小程序如何获取地址
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&amp;&amp;mysql)六
2006/10/09 PHP
Cannot modify header information错误解决方法
2008/10/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php判断当前操作系统类型
2015/10/28 PHP
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
PHP两种查询函数array/row的区别
2013/06/03 面试题
新闻编辑自荐信
2013/11/03 职场文书
学习雷锋倡议书
2014/04/15 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
Go语言编译原理之源码调试
2022/08/05 Golang