vue.js 分页

迈不过友情╰ 2021-08-28 17:07 443阅读 0赞

先上样式的代码

<style> .fenye { font-weight: 900;height: 40px;text-align: center;color: #888;margin: 0 auto;background: #f2f2f2;}
    	.pagelist { font-size: 0;background: #fff;height: 50px;line-height: 50px;}
    	.pagelist span { font-size: 14px;}
    	.pagelist .jump { border: 1px solid #ccc;padding: 5px 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;cursor: pointer;margin-left: 5px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none;user-select:none;}
    	.pagelist .bgprimary { cursor: default;color: #fff;background: #fa7804;border-color: #fa7804;}
    	.jumpinp input { width: 55px;height: 26px;font-size: 13px;border: 1px solid #ccc-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;text-align: center;}
    	.ellipsis { padding: 0px 8px;}
    	.jumppoint { margin-left: 30px;}
    	.pagelist .gobtn { font-size: 12px;}
    	.bgprimary { cursor: default;color: #fff;background: #337ab7;border-color: #337ab7;}
    	.pagelist .jump.disabled{ pointer-events: none; background: #ddd;}
    </style>

html 部分的代码

<div class="fenye" id="fenye" v-show="show">
    	<div class="pagelist">
    		  <span class="jump" @click="jumpPage(1)">首页</span>
    		  <span class="jump" :class="{disabled:pstart}" @click="up_current_page">上一页</span>
    		  <span class="jump" v-for="num in indexs" :class="{bgprimary:current_page==num}" @click="jumpPage(num)">{ { num}}</span>
    		  <span :class="{disabled:pend}" class="jump" @click="down_current_page">下一页</span>
    		  <span class="jump" @click="jumpPage(pages)">尾页</span>
    		  
    	</div>
    </div>

JS部分的代码

<script src="js/vue.js"></script>
    <script>
        var newlist = new Vue({ 
          el: '#fenye',
          data: { 
            //分页插件
    		current_page: 0, //当前页
    		pages: 0, //总页数
    		changePage:'',//跳转页
    		nowIndex:0,
    		show_page:5,//显示页码的数量
          },
          computed:{ 
            show:function(){ 
    			return this.pages && this.pages !=1
    		},
    		pstart: function() { 
    			return this.current_page == 1;
    		},
    		pend: function() { 
    			return this.current_page == this.pages;
    		},
    		efont: function() { 
    			if (this.pages <= this.show_page) return false;
    			return this.current_page > 5
    		},
    		ebehind: function() { 
    			if (this.pages <= this.show_page) return false;
    			var nowAy = this.indexs;
    			return nowAy[nowAy.length - 1] != this.pages;
    		},
    		indexs: function() { 
    			var left = 1,
    			right = this.pages,
    			ar = [];
    			if (this.pages >= this.show_page) { 
    				if (this.current_page > 5 && this.current_page < this.pages - 4) { 
    				   left = Number(this.current_page) - 2;
    				   right = Number(this.current_page) + 2;
    				}else { 
    					   if (this.current_page <= 5) { 
    						 left = 1;
    						 right = this.show_page;
    					   } else { 
    						 right = this.pages;
    	
    						 left = this.pages - 4;
    					   }
    				}
    			}
    			while (left <= right) { 
    				ar.push(left);
    				left++;
    			}
    			return ar;
    		},
          },
          methods: { 
            //跳转分页
    		jumpPage: function(page) { 
    		   var that = this;
    		   that .current_page = page;
    		   //this.lists(); //执行业务逻辑
    		},
    		//上一页
    		up_current_page:function(){ 
    		    var that = this;
    			that .current_page--;
    			//this.lists(); //执行业务逻辑
    		},
    		//下一页
    		down_current_page:function(){ 
    		    var that = this;
    			that .current_page++;
    			//this.lists(); //执行业务逻辑
    		},
          },
    
        })
      </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

相关前端分页（vue前端分页，el分页，el-pagination分页，饿了吗分页）

简述：作为一名前端开发者，分页功能我们经常会用到，但有时候后端会把数据一次性给我们，需要我们自己处理数据，做前端分页，下面给大家介绍如何实现，其实很简单，就是使用数组的sli

缺乏、安全感/ 2023年10月04日 21:52/ 0 赞/ 79 阅读

相关 Java的PDF分页操作：分页读取、分页拆分

本文以Java示例展示读取PDF分页读取、分页拆分的方法。 1、分页读取 1.1 [Maven][]仓库下载导入在pom.xml中配置maven路径，指定依赖，

旧城等待，/ 2023年09月30日 12:36/ 0 赞/ 61 阅读

相关分页

mysql分页：select \ from 表 limit (pageNo-1)\pageSize,pageSize; oracle分页：select a.\ (select

柔光的暖阳◎/ 2022年11月28日 10:29/ 0 赞/ 280 阅读

相关 PHP实现分页：文本分页和数字分页

来源：[http://www.ido321.com/1086.html][http_www.ido321.com_1086.html] 最近，在项目中要用到分页。分页功

左手的ㄟ右手/ 2022年08月13日 11:59/ 0 赞/ 395 阅读

相关分页

1、分页监听器 web.xml <listener> <listener-class> com.xxxxx.dhm.portalMS.c

比眉伴天荒/ 2022年08月06日 06:04/ 0 赞/ 303 阅读

相关分页

[几种分页方法效率比较][Link 1] ASP.net 的DataGrid 控件的内置分页功能一直不被看好，原因是它先把所有数据从数据库读出来再进行分页。在数据量很大的

短命女/ 2022年07月14日 23:14/ 0 赞/ 314 阅读

相关分页介绍；分页的种类，分页的原理

1.1．分页介绍问题:为什么分页? 因为数据量比较大，为了用户有更好的体验。一般情况下，数据在展示时都会进行分页操作。分页的种类分页有两种: 1.物理

超、凢脫俗/ 2022年06月06日 12:49/ 0 赞/ 404 阅读

相关 easyUI 分页前端分页与后端分页

前端分页初始化datagrid时加上Filter $('tabL'+currentCatalogId).datagrid({ loadFilter: pa

心已赠人/ 2022年05月19日 06:07/ 0 赞/ 412 阅读

相关分页

package com.tts.dao.imple; import java.util.List; import java.util.Map;

野性酷女/ 2022年05月16日 06:11/ 0 赞/ 303 阅读

相关 vue中使用分页插件vuejs-paginate

1.安装依赖库（需要用到bootstrap的css样式）及分页插件（vuejs-paginate） npm install bootstrap@3.3.0 -–sav

r囧r小猫/ 2022年04月10日 07:21/ 0 赞/ 824 阅读