vue 手写分页 - 技术栈

【先看效果】

（1）内容小于2页

不展示页码

（2）1 < 内容页数< 限定展示页码

展示：页码、上下页；隐藏：首页、末页图标，上、下一区间码。即：（页数：3；限定展示页码：5）

（3）内容页数 > 展示页码

展示：页码、上下页、首页、末页图标，上、下一区间码，去输入指定页

隐藏：无

【VUE代码 html部分】

html 复制代码

<ul v-if="pages > 1" class="am-pagination" style="text-align: center;">
	<li :class="pageIndex === 1 ? 'am-disabled':''" >
		<a v-if="pages>showPageNum" href="#" @click.prevent="changeIndex(1)" style="display: inline;" title="首页"><<</a>
		<a href="#" @click.prevent="changeIndex(pageIndex-1)" style="display: inline;" title="上一页">‹</a>
		<input title="上一区间码" class="movePageNum" :class="prePageNumClass" style="margin-left: -5px;" type="button" @click="prePageNum" value="..."/>
	</li><!-- 上一页 -->

	<li v-for="p in computePages"
		:key="p"
		@click.prevent="changeIndex(p)"
		:class="pageIndex === p ? 'am-active':''">
		<a href="#">{{p}}</a>
	</li><!-- 第1、2...n...页(pageSize=6) -->
	<li :class="pageIndex === pages ? 'am-disabled':''" >
		<input title="下一区间码" class="movePageNum" :class="nextPageNumClass" style="margin-left: -5px;" type="button" @click="nextPageNum" value="..."/>
		<a href="#" @click.prevent="changeIndex(pageIndex+1)" style="display: inline; margin-right: 5px;" title="下一页">›</a> 
		<a v-if="pages>showPageNum" href="#" @click.prevent="changeIndex(pages)" style="display: inline;" title="末页">>></a>
	</li><!-- 下一页 -->
	<li v-if="pages>showPageNum" style="display: inline;">
		<span style="display: inline-block; border: 0; pointer-events: none; padding:0.5em 6px 0.5em 2px; " >去</span> 
		<input ref="inputGotoPage" class="inputGotoPage" type="number" max="99999" min="1" oninput="if(value.length>4) value=value.slice(0,5)" value="1" />
		<span style="display: inline; border: 0; pointer-events: none; padding: 5px 0;">页</span>
		<input title="点击跳转至相应页" class="movePageNum" type="button" @click="gotoPage" value="go"/>
	</li>
</ul>

【VUE代码 JavaScript部分】

javascript 复制代码

<script>

export default {
	name: "NewsView",
	data(){
		return{
			newsPageList:[],    // 数据集
			computePages:[],
			prePageNumClass:'',
			nextPageNumClass:'',
			pageIndex: 1,
			pageSize: 6,        // 每页显示数量
			offset: 0,
			pages: 1,
			total: 0,
			showPageNum: 5,     // 限制展示页码
			beginPageNum: 0,
			endPageNum: 0,
		}
	},
	mounted() {
		this.getNewList();
	},
	methods:{
		// 获取数据集
		getNewList(){
			this.getRequest("/api/page/news", {typeKey:'n_2_1_list', sort:'order_num', order: 'desc', isEnabled: 0, hideContent:"", limit: this.pageSize, offset: this.offset}).then(resp =>{
				if (resp && resp.code == 0 && resp.data != null){
					this.explainData(resp.data);
				}
			});
		},
		
		// 数据集解析
		explainData(respData){
			this.newsPageList = respData.rows;
			this.total = respData.total
			this.pages = Math.ceil(this.total / this.pageSize)
			// 首次加载，生成页码。后续加载，依据页码传参加载，依需 刷新页码
			if(this.endPageNum==0) this.freshPageNum(1);
		},
		
		/* 【新闻分页】----begin------------<<<<<<<<<<<<<<<<<<<<<<<<<-------------------------- */
		gotoPage(){
			var gotoPageVal = this.$refs.inputGotoPage.value;
			if(gotoPageVal){
				var gotoPage = parseInt(gotoPageVal)
				if(gotoPage<1){
					gotoPage = 1;
					this.$refs.inputGotoPage.value = 1;
				}
				if(gotoPage>this.pages) {
					gotoPage = this.pages;
					this.$refs.inputGotoPage.value = gotoPage;
				}
				
				if(gotoPage<this.beginPageNum || gotoPage>this.endPageNum) this.freshPageNum(gotoPage)
				this.changeIndex(gotoPage);
			}
			
		},
		
		prePageNum(){
			this.endPageNum = this.beginPageNum;
			this.beginPageNum = this.beginPageNum - this.showPageNum + 1
			if(this.beginPageNum<1) {
				this.beginPageNum = 1;
			}
			
			var changeIndex = (this.beginPageNum <= this.pageIndex && this.pageIndex <= this.endPageNum) ? this.pageIndex : this.endPageNum;
			this.freshPageNum(this.beginPageNum);
			this.changeIndex(changeIndex);
		},
		
		nextPageNum(){
			this.beginPageNum = this.endPageNum;
			this.endPageNum = this.endPageNum + this.showPageNum - 1
			if(this.endPageNum>this.pages) {
				this.beginPageNum = this.pages - this.showPageNum + 1;
			}
			
			var changeIndex = (this.beginPageNum <= this.pageIndex && this.pageIndex <= this.endPageNum)?this.pageIndex : this.beginPageNum;
			this.freshPageNum(this.beginPageNum);
			this.changeIndex(changeIndex);
		},
		
		// 页码总是最多展示 this.showPageNum 个
		// 三目运算，多语句，返回值为最后的语句结果 
		// condition ? (statement1, statement2, statement3) : (statement4, statement5); 
		// true 返回值 statement3; false 返回值 statement5
		freshPageNum(start) {
			// 计算 起止页码
			var startMax = this.pages - this.showPageNum + 1; // 起始页码 的最大值
			start = start>startMax?startMax:start;
			start<=1?(this.prePageNumClass = 'hiddenChangePage', this.beginPageNum = start = 1):(this.prePageNumClass = 'showChangePage')
			
			var end = start + this.showPageNum - 1;	// 根据 起始页码 计算 终止页码
			end = end > this.pages ? this.pages : end;
			end==this.pages ? (this.nextPageNumClass = 'hiddenChangePage'):(this.nextPageNumClass = 'showChangePage');
			
			this.beginPageNum = start;
			this.endPageNum = end;
			
			// 生成页码
			var arr = [];
			for (var i = start; i <= end; i++) {
				arr.push(i);
			}
			this.computePages = arr;
		},
		
		changeIndex(p){
			if(this.pageIndex != p) {// 只有切换页码，才请求数据。减少重复请求。
				this.pageIndex = p;
				this.offset = (this.pageIndex-1) * this.pageSize;
				this.getNewList();
			}
			
			if(p>this.endPageNum) return this.freshPageNum(p);
			if(p<this.beginPageNum) return this.freshPageNum(p-this.showPageNum + 1);
			if(p==1 || p==this.pages) this.freshPageNum(p);			// 首、末的页
		},
		/* 【新闻分页】------end------------->>>>>>>>>>>>>>>---------------------- */
		
	},
}
</script>

【VUE代码 css部分】

css 复制代码

<style scoped>

.hiddenChangePage{
	display: none !important;
}
.showChangePage{
	display: inline !important;
}

</style>