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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
childNodes.length与children.length的区别
May 14 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
再论Javascript的类继承
Mar 05 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
MUI 上拉刷新/下拉加载功能实例代码
Apr 13 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 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
再谈PHP中单双引号的区别详解
2016/06/12 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
Javascript Objects详解
2014/09/04 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
python logging日志模块的详解
2017/10/29 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
临床医师专业个人自我评价
2014/01/08 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
个人查摆剖析材料
2014/10/16 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python