极简按钮式分页器

Orcatt

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

阅读量97

点赞数 1

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

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

本文链接：https://blog.csdn.net/orcatt/article/details/127449656

版权

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

3 篇文章 0 订阅

订阅专栏

<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;
}