vue分页插件的使用方法


Posted in Javascript onDecember 25, 2019

本文实例为大家分享了vue分页插件的具体代码,供大家参考,具体内容如下

分页插件代码:

<div>
  <div class="page">
   <div class="pagelist">
      <span class="jump" :class="{disabled:pstart}" @click="lessPage()">上一页</span>
      <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>
      <span class="ellipsis" v-show="efont">...</span>
      <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}"
        @click="jumpPage(num)">{{num}}</span>
      <span class="ellipsis" v-show="ebehind">...</span>
 
      <span :class="{disabled:pend}" class="jump" @click="addPage()">下一页</span>
      <span v-show="current_page<pages-4" class="jump" @click="jumpPage(pages)">{{pages}}</span>
 
     <#--<span class="jumppoint">跳转到:</span>-->
     <#--<span class="jumpinp"><input type="text" v-model="changePage"></span>-->
     <#--<span class="jump gobtn" @click="jumpPage(changePage)">GO</span>-->
   </div>
  </div>
</div>

vue代码

data: {
  current_page: result.resultObj.number + 1, //当前页
  pages: result.resultObj.totalPages, //总页数
  changePage: '',//跳转页
  nowIndex: 0
    },
  computed: {
    show: function () {
     return this.pages && this.pages != 1
   },
  pstart: function () {
    return this.current_page == 1;
   },
  pend: function () {
    return this.current_page == this.pages;
     },
   efont: function () {
    if (this.pages <= 7) return false;
      return this.current_page > 5
     },
   ebehind: function () {
      if (this.pages <= 7) return false;
      var nowAy = this.indexs;
      return nowAy[nowAy.length - 1] != this.pages;
     },
    indexs: function () {
 
      var left = 1,
        right = this.pages,
        ar = [];
   if (this.pages >= 7) {
     if (this.current_page > 5 && this.current_page < this.pages -4){
        left = Number(this.current_page) - 3;
        right = Number(this.current_page) + 3;
       } else {
        if (this.current_page <= 5) {
         left = 1;
         right = 7;
        } else {
         right = this.pages;
 
         left = this.pages - 6;
        }
       }
      }
    while (left <= right) {
       ar.push(left);
       left++;
      }
      return ar;
     },
    },
    methods: {
     jumpPage: function (id) {
      if (id <= this.pages && id >= 1) {
       this.current_page = id;
       loadData(this.current_page - 1, size);
      }
     },
    lessPage: function () {
      this.current_page--;
      loadData(this.current_page - 1, size);
     },
    addPage: function () {
      this.current_page++;
      loadData(this.current_page - 1, size);
   }
}

使用说明:

直接拷贝即可使用,只需要修改总页数、当前页。

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

Javascript 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
javascript中this关键字详解
Dec 12 Javascript
vue模板语法-插值详解
Mar 06 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
继承行为在 ES5 与 ES6 中的区别详解
Dec 24 #Javascript
在JavaScript中实现链式调用的实现
Dec 24 #Javascript
vue实现分页加载效果
Dec 24 #Javascript
微信小程序如何获取地址
Dec 24 #Javascript
浅析vue-router中params和query的区别
Dec 24 #Javascript
JavaScript实现英语单词题库
Dec 24 #Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php 常用类汇总 推荐收藏
2010/05/13 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
Bootstrap项目实战之子栏目资讯内容
2016/04/25 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python脚本处理空格的方法
2016/08/08 Python
Django的Modelforms用法简介
2019/07/27 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
python重要函数eval多种用法解析
2020/01/14 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
selenium如何定位span元素的实现
2021/01/13 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
为什么需要版本控制?
2013/08/08 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
校运会广播稿100字
2014/01/27 职场文书
市场总监岗位职责
2015/02/11 职场文书
2015年助残日活动总结
2015/03/27 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python