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之网页换肤实现代码
Apr 30 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
vue中touch和click共存的解决方式
Jul 28 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仿QQ验证码的实例分析
2013/07/01 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
JavaScript实现手风琴效果
2021/02/18 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python文件处理
2016/02/29 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python单链表原理与实现方法详解
2020/02/22 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
计算机专业自荐信
2013/10/14 职场文书
团队口号大全
2014/06/06 职场文书
民事赔偿协议书
2014/11/02 职场文书
二年级学生期末评语
2014/12/26 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
消防安全月活动总结
2015/05/08 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Go语言设计模式之结构型模式
2021/06/22 Golang