极简按钮式分页器

Orcatt

已于 2022-10-21 17:00:53 修改

阅读量148

点赞数 1

CC 4.0 BY-SA版权

分类专栏：信手拈来的轮子文章标签： css 前端 javascript

于 2022-10-21 16:52:39 首次发布

本文链接：https://blog.youkuaiyun.com/orcatt/article/details/127449656

信手拈来的轮子专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了一个使用 Vue.js 编写的简单分页组件。通过点击事件处理函数`pagesClick`更新当前活动页数`paginaActive`，并展示了对应的 CSS 样式以实现不同状态的分页按钮效果。此组件可用于数据展示的分页，提高用户体验。

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

<ul class="pagination">
    <li v-for="index in 6" :key="index" @click="pagesClick(index)":class="{ paginaActive: paginaActive === index }"></li>
</ul>

let paginaActive = ref(1);
function pagesClick(index) {
    paginaActive.value = index;
}

/* 分页器 */
.pagination {
    width: 100%;
    text-align: center;
    height: 30px;
    margin: 20px 0;
}

.pagination>li {
    display: inline-block;
    margin-right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #4991fc;
}

.paginaActive {
    width: 22px !important;
    height: 6px;
    border-radius: 3px;
    background-color: #4991fc;
}