mp_exhibitor_miniprog/components/common/u-pagination/index.vue

<template>
	<view class="u-pagination-container">
		<view class="total-bix">
			共 {{total}} 项
		</view>
		<view class="page-change-box">
			<button class="go-btn go-pre-btn page-item" :disabled="currentPage === 1"
				@click="changeCurrentPage(currentPage-1)">
				<i class="iconfont icon-Left"></i>
			</button>
			<template v-if="pageNum<=5">
				<view class="page-item" :class="{'active': n+1 === currentPage}" v-for="n in pageNum" :key="n"
					@click="changeCurrentPage(n+1)">
					{{n+1}}
				</view>
			</template>
			<template v-else>
				<view class="page-item" :class="{'active': currentPage === 1}" @click="changeCurrentPage(1)">
					1
				</view>
				<view class="page-item" :class="{'active': currentPage === 2}" v-if="currentPage<4"
					@click="changeCurrentPage(2)">
					2
				</view>
				<view class="page-item" :class="{'active': currentPage === 3}" v-if="currentPage<4"
					@click="changeCurrentPage(3)">
					3
				</view>
				<view class="page-item munber-point" v-if="currentPage>=4">
					...
				</view>
				<view class="page-item active" v-if="currentPage>=4 && currentPage<pageNum-2">
					{{currentPage}}
				</view>
				<view class="page-item munber-point" v-if="currentPage<pageNum-2">
					...
				</view>
				<view class="page-item" :class="{'active': currentPage === pageNum-2}" v-if="currentPage>=pageNum-2"
					@click="changeCurrentPage(pageNum-2)">
					{{pageNum-2}}
				</view>
				<view class="page-item" :class="{'active': currentPage === pageNum-1}" v-if="currentPage>=pageNum-2"
					@click="changeCurrentPage(pageNum-1)">
					{{pageNum-1}}
				</view>
				<view class="page-item" :class="{'active': currentPage === pageNum}" @click="changeCurrentPage(pageNum)">
					{{pageNum}}
				</view>
			</template>
			<button class="go-btn go-next-btn page-item" :disabled="currentPage === pageNum"
				@click="changeCurrentPage(currentPage+1)">
				<i class="iconfont icon-Left-1"></i>
			</button>
		</view>
		<view class="jump-page-box">
			<view class="junp-text">
				前往
			</view>
			<input type="text" v-model="jumpPage" @confirm="changeCurrentPage(jumpPage)" />
			<view class="junp-text">
				页
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
      page: {
        type: Number,
        default: 1
      },
			pageSize: {
				type: Number,
				default: 10
			},
			total: {
				type: Number,
				default: 0
			},
		},
		computed: {
			pageNum() {
				return Math.ceil(this.total / this.pageSize)
			}
		},
		watch: {
      page(val) {
          this.currentPage = val
      }
    },
		data() {
			return {
				jumpPage: 1,
				currentPage: 1
			}
		},
		created() {},
		mounted() {},
		methods: {
			changeCurrentPage(page) {
				let goPage = Number(page)
				if (goPage > this.pageNum || goPage < 1) {
					uni.showToast({
						title: '所选页面不存在，请重新选择！',
						icon: 'none',
						duration: 2000
					});
				} else {
					this.currentPage = goPage
					this.$emit('page-change', this.currentPage)
          uni.pageScrollTo({
            scrollTop: 0, // 滚动到顶部
            duration: 300 // 滚动时间，单位为毫秒
          });
				}
			}
		}
	}
</script>
<style lang="scss">
	.u-pagination-container {
		display: flex;
		align-items: center;
		grid-gap: 26rpx;
		font-size: 20rpx;
		color: #555555;
		margin-top: 40rpx;

		.page-change-box {
			display: flex;
			grid-gap: 10rpx;

			.page-item {
				width: 46rpx;
				height: 46rpx;
				background-color: #F5F6F8;
				border-radius: 3rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #94A3B8;

				&.go-btn {
					padding: unset;
					margin: unset;

					&::after {
						border: unset;
					}
				}

				&.active {
					background-color: #E57519;
					color: #FFFFFF;
				}

				&>i {
					font-size: 24rpx;
				}
			}
		}

		.jump-page-box {
			display: flex;
			grid-gap: 10rpx;
			align-items: center;

			input {
				width: 50rpx;
				height: 50rpx;
				background-color: #FFFFFF;
				border-radius: 6rpx;
				border: 1rpx solid #94A3B8;
				text-align: center;
			}
		}
	}
</style>