首页
所有分类
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高级程序设计
Dec 29 Javascript
Maps Javascript
Jan 22 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
electron 安装，调试，打包的具体使用
Nov 06 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
ipad(1) i5 10400(1) 窗口函数(3) Tomcat(18) 数据同步(1) 速龙(1) win11(40) 分析统计(1) redis shake(1) 排名(1)
You might like
php你的验证码安全码？
2007/01/02 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
php压缩文件夹最新版
2018/07/18 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
python进程与线程小结实例分析
2018/11/11 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
Linux环境下MySQL-python安装过程分享
2015/02/02 Python
Python中List.count()方法的使用教程
2015/05/20 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python读写csv文件的方法
2019/08/13 Python
基于python的列表list和集合set操作
2019/11/24 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python join()函数原理及使用方法
2020/11/14 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
英国的知名精品百货公司：House of Fraser（福来德）
2016/08/14 全球购物
AHAVA美国官方网站：死海海泥护肤品牌
2016/10/18 全球购物
酒后驾车标语
2014/06/30 职场文书
行政管理专业求职信
2014/07/06 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
Python安装使用Scrapy框架
2022/04/12 Python
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers