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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
jsTree使用记录实例
Dec 01 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
vue-axios使用详解
May 10 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php打开远程文件的方法和风险及解决方法
2013/11/12 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
vue-父子组件和ref实例详解
2019/11/10 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python数据结构之翻转链表
2017/02/25 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python函数参数操作详解
2018/08/03 Python
Python中修改字符串的四种方法
2018/11/02 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
详解python中的index函数用法
2019/08/06 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
linux面试题参考答案(4)
2013/01/28 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
2015年客服工作总结范文
2015/04/02 职场文书
对公司的意见和建议
2015/06/04 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
实现一个简单得数据响应系统
2021/11/11 Javascript