uniapp的tab栏切换

番茄味的西红柿。

已于 2023-02-21 17:36:19 修改

阅读量375

点赞数

文章标签： uni-app javascript 前端 Powered by 金山文档

于 2023-02-21 10:11:04 首次发布

本文链接：https://blog.csdn.net/m0_45865109/article/details/129137346

版权

本文详细介绍了如何在uni-app中实现Tab栏的切换效果，包括使用JavaScript进行动态操作、组件交互以及页面路由的管理，旨在帮助开发者更好地理解和实践uni-app的前端开发。

摘要由CSDN通过智能技术生成

<template>
    <view class="tab">
        <view class="tab-item" @click="testTabClick(index)" :class="tabIndex == index?'active':''" v-for="(item,index) in tabList" :key="index">
            {{item.name}}
        </view>
    </view>
</template>
<script>
    export default{
        data() {
            return {
                tabIndex:0,
                tabList:[{
                    name:"电器"
                },{
                    name:"衣服"
                },{
                    name:"百货"
                },{
                    name:"电脑"
                }]
            }
        },
        methods: {
            testTabClick(index) {
                console.log(index)
                this.tabIndex = index
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tab{
        display: flex;
        .tab-item{
            flex-shrink: 0;
            padding: 24rpx;
            position: relative;
            transition: all 0.2s linear;
            &::after{
                transition: all 0.2s linear;
                transform: translateX(-50%) scaleX(0);
                content: '';
                width: 50%;
                position: absolute;
                left: 50%;
                bottom: 20rpx;
                border-bottom: 6rpx solid red;
                border-radius: 4rpx;
            }
            &.active{
                &::after{
                    content: '';
                    width: 50%;
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%) scaleX(1);
                    bottom: 20rpx;
                    border-bottom: 6rpx solid red;
                }
            }
        }
    }
</style>