首页
所有分类
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 相关文章推荐
jquery.validate使用攻略 第二部
Jul 01 Javascript
JavaScript 的继承
Oct 01 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JS打印组合功能
Aug 04 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 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
MySQL面试题(19) EJB面试题(46) C#面试题(90) Javascript面试题(44) 网络工程师面试题(96) 软件测试工程师面试题(53) 软件工程师面试题(40) Oracle面试题(81) LINUX面试题(83) PYTHON面试题(27)
You might like
header导出Excel应用示例
2014/01/24 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
jqgrid 编辑添加功能详细解析
2013/11/08 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
Python 操作MySQL详解及实例
2017/04/30 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python实现控制COM口的示例
2019/07/03 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python用700行代码实现http客户端
2021/01/14 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
德国狗狗用品在线商店：Schecker
2017/03/17 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
质检的岗位职责
2013/11/17 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
黄金酒广告词
2014/03/21 职场文书
教师先进个人材料
2014/12/17 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript
react中的DOM操作实现
2021/06/30 Javascript