首页
所有分类
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 dialog里的服务器控件 事件失效问题
Dec 08 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
JS解析XML实例分析
Jan 30 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
微信小程序：数据存储、传值、取值详解
May 07 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) tree shaking(1) HBuilder(1) Three.js(1) kubernetes(1) GPU(1) group by(1) 条形码(1) Express(1) delete in(1)
You might like
php开发留言板的CRUD(增，删，改，查)操作
2012/04/19 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
js时间控件只显示年月
2017/01/08 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
python 检查是否为中文字符串的方法
2018/12/28 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
美国在线咖啡、茶和餐厅供应商：LollicupStore
2018/05/04 全球购物
以工厂直接定价的传奇性能：Ben Hogan Golf
2019/01/04 全球购物
日本动漫周边服饰销售网站：Atsuko
2019/12/16 全球购物
党员的自我评价范文
2014/01/02 职场文书
美术教学感言
2014/02/22 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年药房工作总结
2014/11/22 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL