vue 移动端简单分页组件

最新推荐文章于 2025-06-20 12:34:14 发布

原创最新推荐文章于 2025-06-20 12:34:14 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #移动端 #分页组件

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

移动端

1 篇文章

订阅专栏

本文介绍了如何在Vue移动端项目中创建并使用一个简单的分页组件pagination.vue，详细阐述了组件的引入和应用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页组件：pagination.vue

<template>
	<div class="pagination">
		<div class="page" v-if="totalPage>0">
			<span :class="page==1 || totalPage==0?'undis':''" @click="changePage('pev')">上一页</span>
			<div class="page-box">
				<span v-if="totalPage>0" :class="page == 1 ? 'actived' : ''">1</span>
				<span v-if="totalPage>1" :class="page == 2 ? 'actived' : ''">2</span>
				<span v-if="totalPage>2" :class="page == 3 ? 'actived' : ''">3</span>
				<span v-if="totalPage>3" :class="(page == 4 || 7 < totalPage)? 'actived' : ''">{{7 > totalPage ? 4:(page>3?(page==totalPage?'...':"..."+page):'...')}}</span>
				<span v-if="totalPage>4" :class="(page == 5 && 7 > totalPage) ? 'actived' : ''">{{7 > totalPage ? 5:'...'}}</span>
				<span v-if="totalPage>5" :class="(page == 6 && 7 > totalPage) || page == totalPage ? 'actived' : ''">{{7 > totalPage ? 6:totalPage}}</span>
			</div>
			<span :class="page==totalPage || totalPage==0 ? 'undis' :''" @click="changePage('next')">下一页</span>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			totalPage:{
				type:Number,
				default:0
			},
			page:{
				type:Number,
				default:0
			}
		},
	    data() {
	        return{
	        }
	    },
		mounted(){
		},
	    methods: {
			// 翻页
			changePage(type){
				this.$emit('changePage',type);
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.page{
		width:100%;
		height:.27rem;
		line-height:.27rem;
		color:#9C9C9C;
		font-size:.27rem;
		display: flex;
		justify-content: center;
		align-items:center;
		margin-top:.373rem;
		span{
			color:#1D1D1D;
		}
		div{
			margin:0 .12rem;
			span{
				color:#9C9C9C;
			}
			.actived{
				color:#1D1D1D;
			}
		}
		.undis{
			color:#9C9C9C;
		}
	}
</style>

相应的页面引入组件

import pagination from '../../components/pagination.vue'

使用组件

<pagination :totalPage="totalPage" @changePage="changePage" :page="page"></pagination>

<script>
	import pagination from '../../components/income/pagination.vue'
	export default {
	    data() {
	        return{
				totalPage:3,//总页数
				page:1,//当前页
	        }
	    },
		components:{
			pagination
		},
		mounted(){
		},
	    methods: {
			// 搜索
			search(){
				this.page = 1;
			},
			// 切换页面数据
			changePage(t){
				if(t == 'next'){
					if(this.page<this.totalPage){
						this.page++;
						this.$emit('changePage',this.page)
					}
				}else{
					if(this.page>1){
						this.page--;
						this.$emit('changePage',this.page)
					}
				}
			},
	    }
	}
</script>