uniapp 分页组件封装

先上图

由于项目中使用分页组件需要有页码展示，并且能够点击跳转，本想使用uni-ui官方组件库来自定义，但是uni-ui官方组件库的分页组件实在是太过粗糙，故此自行封装。

官方分页器：

前提===>保证项目安装有uni-ui组件库

gitee联系作者：https://gitee.com/zlflying

<template>
    <!-- 分页组件 -->
    <view class="page">
        <view class="left-btn" :class="currentPage === 1 ? 'disable' : ''"
            @click="() => { if (currentPage !== 1) { changePage(currentPage - 1) } }">
            <uni-icons type="left" size="22" color="black"></uni-icons>
        </view>
        <view class="page-num" id="page-num">
            <view class="num" :class="currentPage == item ? 'active' : ''" v-for="(item, index) in currentPageList"
                @click="changePage(item)">
                {{ item }}
            </view>
            <view class="num" v-if="currentPage < totalPage" @click="changePage(currentPageList[pageSize - 1] + 1)">
                ...
            </view>
        </view>
        <view class="right-btn" :class="currentPage === totalPage ? 'disable' : ''"
            @click="() => { if (currentPage !== totalPage) { changePage(currentPage + 1) } }">
            <uni-icons type="right" size="22" color="black"></uni-icons>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        //总页码
        totalPage: {
            type: Number,
            default: 0
        },
        // 每页数量
        pageSize: {
            type: Number,
            default: 5
        },
    },
    computed: {
        // 显示页码
        currentPageList() {
            // 序列生成器
            const range = (start, stop, step) =>
                Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
            if (this.currentPage > this.pageSize) {
                return range(this.currentPage - this.pageSize + 1, this.currentPage, 1);
            } else {
                return range(1, this.pageSize, 1);
            }
        }
    },
    data() {
        return {
            //当前页码
            currentPage: 1,
        }
    },
    methods: {
        changePage(page) {
            this.currentPage = page;
            this.$emit('changePage', this.currentPage);
        }
    }
}
</script>
<style scoped lang="scss">
.page {
    width: 90%;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-btn {
        background-color: #fff;
        border-radius: 5px;
        padding: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    .page-num {
        width: 60%;
        display: flex;
        justify-content: space-between;
        overflow: hidden;

        .num {
            background-color: #fff;
            padding: 3px 7px;
            border-radius: 5px;
            font-size: 17px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
    }

    .right-btn {
        background-color: #fff;
        border-radius: 5px;
        padding: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

}

.active {
    background-color: #388EFC !important;
    color: #fff;
}

.disable {
    background-color: #ccc !important;
    cursor: not-allowed;
}
</style>

使用

<template>
<pageView class="page" :totalPage="page" @changePage="changePage"></pageView>
</template>
<script>
import pageView from "@/components/common/pageView/index.vue";
export default {
	components: {
		pageView
	},
	data() {
		return {
			page:15
		}
	},
	methods: {
		changePage(page) {
			console.log(page);
		}
	}
</script>