首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现分页的三种效果

Posted in Javascript onJune 23, 2020

本文实例为大家分享了vue实现分页效果的具体代码，供大家参考，具体内容如下

第一种效果：数据量不大时可采用

vue实现分页的三种效果

<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8">
<script src="vue.min.js" type="text/javascript"></script>
<title>vue分页</title>
<style type="text/css">
ul{list-style:none;margin:0;}
.pagetation_info{width:100%;height:27px;padding:20px 0;}
ul.pagetation_box{float:right;height:100%;padding:0 60px;}
ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;border-radius: 3px;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 22px;}
ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}
ul.pagetation_box li.active{background-color: #FF4646;border-color:#FF4646;}
ul.pagetation_box li.active a{color:#fff;}
ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}
ul.pagetation_box li:hover{background-color: #FF4646;border-color:#FF4646;}
ul.pagetation_box li:hover a{color:#fff;}
.num_total{float:right;height:100%;padding-top:3px;padding-bottom:3px;}
.num_total>span{color:#FC5B27;}
</style>
</head>

<body id="app-body">

<div class="pagetation_info clearfix">
<ul class="pagetation_box">
<li class="firstPage" @click=" page.currentpage = 0 "><a href="javascript:;" >首页</a></li>
<li class="prev" v-show=" page.currentpage > 0 " @click=" page.currentpage-- "><a href="javascript:;" ><</a></li>
<li v-for="d in page.totalpage" @click=" page.currentpage = $index " :class=" page.currentpage == $index ? 'active' : '' "><a href="javascript:;" >{{$index + 1}}</a></li>
<li class="next" v-show=" page.currentpage < page.totalpage - 1 " @click=" page.currentpage++ "><a href="javascript:;" >></a></li>
<li class="lastPage" @click=" page.currentpage = page.totalpage - 1 "><a href="javascript:;" >尾页</a></li>
</ul>
<div class="num_total">
共 <span>{{page.totalrecord}}</span> 条信息，共 <span>{{page.totalpage}}</span> 页
</div>
</div>

<script>
new Vue({
el: "#app-body",
data : {
"page" : {
"totalrecord" : 100,
"currentpage" : 0,
"pagesize" : 20,
"totalpage" : 5,
},
},
watch : {
"page.currentpage" : function(val){
var _this=this;
_this._getList();
},
},
methods : {
_getList:function(){}
},
ready : function(){
var _this = this;
}
});
</script>

</body>
</html>

第二种效果：当数据量较大时使用

vue实现分页的三种效果

<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8">
<script src="vue.min.js" type="text/javascript"></script>
<title>vue分页</title>
<style type="text/css">
ul{list-style:none;margin:0;}
.pagetation_info{width:100%;height:24px;padding:20px 0;}
ul.pagetation_box{float:right;height:100%;padding:0 60px;}
ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 22px;}
ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}
ul.pagetation_box li.active{background-color: #FF4646;border-color:#FF4646;}
ul.pagetation_box li.active a{color:#fff;}
ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}
ul.pagetation_box li:hover{background-color: #FF4646;border-color:#FF4646;}
ul.pagetation_box li:hover a{color:#fff;}
ul.pagetation_box li.more{width:24px;padding:0;background: url(../img/public/page_more.png) no-repeat center center;border:none;}
.num_total{float:right;height:100%;line-height:22px;padding-top:3px;padding-bottom:3px;}
.num_total>span{color:#FC5B27;}
</style>
</head>

<body id="app-body">

<div class="pagetation_info clearfix"> 
<ul class="pagetation_box">
<li class="firstPage" @click="page.currentPage=1"><a href="javascript:;" >首页</a></li>
<li class="prev" v-show="page.currentPage != 1" @click="page.currentPage-- && _gotoPage(page.currentPage)"><a href="javascript:;" ><</a></li>
<li v-for="index in pages" @click="_gotoPage(index)" :class="{'active':page.currentPage == index}"><a href="javascript:;" >{{index}}</a></li>
<li class="next" v-show="page.allPages != page.currentPage && page.allPages != 0 " @click="page.currentPage++ && _gotoPage(page.currentPage)"><a href="javascript:;" >></a></li>
<li class="lastPage" @click="page.currentPage=page.allPages"><a href="javascript:;" >尾页</a></li>
</ul>
<div class="num_total">
共 <span>{{page.allRecords}}</span> 条信息，共 <span>{{page.allPages}}</span> 页
</div>
</div>

<script>
new Vue({
el : "#app-body",
data : {
"page":{
"currentPage":1,
"pagesize":10,
"allRecords":100,
"allPages":10,
"showItem":4,
}
},
watch : {
"page.currentpage" : function(val){
var _this=this;
_this._getList();
},
},
computed:{
pages:function(){
var _this=this;
var p=[];
if( _this.page.currentPage < _this.page.showItem ){
var i = Math.min(_this.page.showItem,_this.page.allPages);
while(i){
p.unshift(i--);
}
}else{
var middle = _this.page.currentPage - Math.floor(_this.page.showItem / 2 ),
i = _this.page.showItem;
console.log(middle,i);
if( middle > (_this.page.allPages - _this.page.showItem) ){
middle = (_this.page.allPages - _this.page.showItem) + 1
}
while(i--){
p.push( middle++ );
}
}
return p;
},
},
methods : {
_gotoPage:function(i){
var _this=this;
if(i == _this.page.currentPage) return;
_this.page.currentPage = i;
},
},
ready : function(){
var _this = this;
_this.pages;
}
});
</script>

</body>
</html>

第三种效果：当数据量很大时使用

vue实现分页的三种效果

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8">
<script src="vue.min.js" type="text/javascript"></script>
<title>vue分页</title>
<style type="text/css">
ul{list-style:none;margin:0;}
.pagetation_info{width:100%;height:30px;padding:20px 0;}
ul.pagetation_box{float:right;height:100%;padding:0 60px;}
ul.pagetation_box li{float:left;height:100%;border:1px solid #e6ecef;background-color: #f8f8f8;margin:0 5px;padding:0 10px;color:#263238;cursor: pointer;text-align: center;line-height: 27px;}
ul.pagetation_box li a{text-decoration: none;color:#263238;font-size: 12px;}
ul.pagetation_box li.active{background-color: #03a9f4;border-color:#03a9f4;}
ul.pagetation_box li.active a{color:#fff;}
ul.pagetation_box li.more{background-color: #fff}
ul.pagetation_box li.prev,ul.pagetation_box li.next{width:7px;}
ul.pagetation_box li.prevDisabled,ul.pagetation_box li.nextDisabled{width:7px;}
ul.pagetation_box li.prevDisabled a,ul.pagetation_box li.nextDisabled a{color:#ccc;}
ul.pagetation_box li.prevDisabled:hover, ul.pagetation_box, li.nextDisabled:hover{background-color: #f8f8f8;border-color:#e6ecef;}
ul.pagetation_box li.prevDisabled:hover a,ul.pagetation_box li.nextDisabled:hover a{color:#ccc;}
ul.pagetation_box li:hover{background-color: #03a9f4;border-color:#03a9f4;}
ul.pagetation_box li.more:hover{background-color: #fff;border:none;}
ul.pagetation_box li:hover a{color:#fff;}
ul.pagetation_box li.more{padding:0;border:none;line-height:22px;}
.num_total{float:right;height:100%;line-height:22px;padding-top:3px;padding-bottom:3px;}
.num_total>span{color:#FC5B27;}
</style>
</head>

<body id="app-body">

<div class="pagetation_info clearfix">
<ul class="pagetation_box">
<li class="prev" v-if="page.prevBtn==true" @click="_gotoPage('prev')"><a href="javascript:;" ><</a></li>
<li class="prevDisabled" v-if="page.prevBtn==false"><a href="javascript:;" ><</a></li>
<li :class="{active:page.currentPage==index}" v-for="index in page.p1" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li>
<li class="more" v-if="page.isShowMore1">...</li>
<li :class="{active:page.currentPage==index}" v-for="index in page.p2" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li>
<li class="more" v-if="page.isShowMore2">...</li>
<li :class="{active:page.currentPage==index}" v-for="index in page.p3" @click="_gotoPage(index)"><a href="javascript:;" >{{index}}</a></li>
<li class="next" v-if="page.nextBtn==true" @click="_gotoPage('next')"><a href="javascript:;" >></a></li>
<li class="nextDisabled" v-if="page.nextBtn==false"><a href="javascript:;" >></a></li>
</ul>
<div class="num_total">
共 <span>{{page.allItems}}</span> 条信息，共 <span>{{page.allPages}}</span> 页
</div>
</div>

<script>
var App=new Vue({
el : "#app-body",
data : {
"page" : {
"currentPage":1,
"allPages":10,
"allItems":100,
"pagesize":10,
"showBtn":5,
"nextBtn":true,
"prevBtn":false,
"isShowMore1":false,
"isShowMore2":false,
"p1":[],
"p2":[],
"p3":[],
},
},
watch : {
"page.currentpage" : function(val){
var _this=this;
_this._getList();
},
},
computed:{
pagination:function(){
var _this=this;
var i = _this.page.showBtn-2;
if(_this.page.currentPage==_this.page.allPages){_this.page.nextBtn=false;}
var p1=[],p2=[],p3=[];
if( _this.page.allPages < _this.page.showBtn ){
_this.page.isShowMore1=false;
_this.page.isShowMore2=false;
i = _this.page.allPages;
while(i){
p1.unshift(i--);
}
}else if(_this.page.allPages > _this.page.showBtn && _this.page.allPages < _this.page.showBtn+1){
_this.page.isShowMore1=false;
_this.page.isShowMore2=true;
if(_this.page.currentPage<3){
p1=[1,2,3];
p3.push(_this.page.allPages);
}else{
p1=[1];
i=_this.page.showBtn-2;
while(i--){
p3.unshift( _this.page.allPages-- );
}
}
}else{
if(_this.page.currentPage<3){
p1=[1,2,3];
p3.push(_this.page.allPages);
_this.page.isShowMore1=false;
_this.page.isShowMore2=true;
}else if(_this.page.currentPage>_this.page.allPages-2){
_this.page.isShowMore1=true;
_this.page.isShowMore2=false;
p1=[1];
i=3;
var allPages = _this.page.allPages;
while(i--){
p3.unshift( allPages-- );
}
}else{
_this.page.isShowMore1=true;
_this.page.isShowMore2=true;
if(_this.page.currentPage==3){
_this.page.isShowMore1=false;
}else if(_this.page.currentPage==_this.page.allPages-1){
_this.page.isShowMore2=false;
}
p1=[1];
p3.push(_this.page.allPages);
var middle=parseInt((_this.page.showBtn-2)/2);
var start=_this.page.currentPage-middle;
i = _this.page.showBtn-2;
while(i--){
p2.push(start++);
}
}
}
_this.page.p1=p1;
_this.page.p2=p2;
_this.page.p3=p3;
}
},
methods : {
_gotoPage:function(n){
var _this=this;
if(n==_this.page.currentPage){
return;
}
if(n==1){
_this.page.prevBtn=false;
}else{
_this.page.prevBtn=true;
}
if(n==_this.page.allPages){
_this.page.nextBtn=false;
}else{
_this.page.nextBtn=true;
}
if(typeof n=='number'){
_this.page.currentPage=n;
}else if(n=='next'){
_this.page.currentPage++;
}else if(n=='prev'){
_this.page.currentPage--;
}
if(_this.page.currentPage==_this.page.allPages){_this.page.nextBtn=false;}
_this.pagination;
},
},
ready : function(){
var _this = this;
_this.pagination;
}
});
</script>

</body>
</html>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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

vue实现分页的三种效果

- Author -

Mei-Ming

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
js获得参数的getParameter使用示例
Feb 26 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 #Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 #Javascript
详细分析Node.js 多进程
Jun 22 #Javascript
详细分析vue响应式原理
Jun 22 #Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 #Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 #Javascript
立体声(1) GWEN(1) ad hoc(1) FM(4) 调频(4) Harman Kardon(1) 调幅(1) 中波(3) KDKA(1) SWL(1)
You might like
php实现jQuery扩展函数
2009/10/30 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
js 调整select 位置的函数
2008/02/21 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
vue检测对象和数组的变化分析
2018/06/30 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
在Python中定义一个常量的方法
2018/11/10 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
Python字典对象实现原理详解
2019/07/01 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python之字典添加元素的几种方法
2020/09/30 Python
家得宝官网：The Home Depot（全球最大的家居装饰专业零售商）
2018/12/17 全球购物
阿联酋彩妆品牌：OUD MILANO
2019/10/06 全球购物
ANINE BING官方网站：奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
信息总监管理职责范本
2014/03/08 职场文书
寒假家长评语大全
2014/04/16 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL