首页
所有分类
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一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
js data日期初始化的5种方法
Dec 29 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
Vue异步组件使用详解
Apr 08 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
js回调函数仿360开机
Dec 26 Javascript
微信小程序实现分页加载效果
Nov 19 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
S-2000(1) 小喇叭开始广播了(1) IC-R9500(1) 内存泄露(1) 小喇叭(1) Spring(9) PostMapping(1) 微信(2) 温控(1) Lifecycle(1)
You might like
用文本文件制作留言板提示（下）
2006/10/09 PHP
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
python字符串格式化方式解析
2019/10/19 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
Python中常见的数制转换有哪些
2020/05/27 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
python实现二分查找算法
2020/09/18 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
GOOD AMERICAN官网：为曲线性感而设计
2017/12/28 全球购物
兰蔻英国官网：Lancome英国
2019/04/30 全球购物
Perfume’s Club中文官网：西班牙美妆在线零售品牌
2020/08/24 全球购物
商务考察邀请函范文
2014/01/21 职场文书
师生聚会感言
2014/01/26 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
模具专业自荐信
2014/05/29 职场文书
班级文化建设标语
2014/06/23 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
Python学习之包与模块详解
2022/03/19 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android