uni-app 顶部tabbar切换

星记 · 发表于 2020-12-15 14:56:00

完成样式

项目地址：https://gitee.com/jielov/uni-app-tabbar

顶部tabbar代码

<!--顶部导航栏-->
<view class="uni_tab_bar">
            <view class="uni_swiper_tab order_top">
                <block v-for="(tabBar,index) in tabBars" :key="index">
                    <view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}" @tap="toggleTab(tabBar.id)">
                        {{tabBar.name}}
                        <view class="swiper_tab_line">
                        </view>
                    </view>
                </block>
            </view>
        </view>

使用v-for 循环 tabbars 来进行标题的加载 v-for="(tabBar,index) in tabBars" :key="index" 。

:key="index" 使得在勾选复选框后不会不随这内容的变动而变动例如在勾选第一个后添加一个新的内容后后勾线后的复选框不会一直是第一个

:class="{'active': tabIndex==index}" 根据index，动态切换css 样式，tabIndex为初始化第一个选择项，在data里面定义tabIndex: 0,tabBars循环数据，放在data里面。

data(){
    return{
        tabIndex: 0, //选中标签栏的序列
        tabBars: [
                    {name: '全部',id: '0'},
                    {name: '待服务',id: '1'},
                    {name: '服务中',id: '2'},
                    {name: '已完成',id: '3'},
                    {name: '已取消',id: '4'},
                ],
    }
}

@tap="toggleTab(tabBar.id)" @tab为点击切换事件，放在methods里面。

toggleTab(index) {
　　this.tabIndex = index;
},

以下为tab内容区域，css样式在最后面哦~

<view class="order_centext">
　　<swiper :current="tabIndex" @change="tabChange" class="order_centext">
　　　　<swiper-item v-for="(content,index) in tabBars" :key="index">
　　　　　　<view class="swiper_item">{{content.name}}</view>
　　　　</swiper-item>
　　</swiper>
</view>

swiper为滑动切换内容，tabbar滑动切换稍微没那么流畅，有点卡顿。可以选择去掉滑动，只保留点击切换即可。

@change="tabChange" 滑动事件，同样也是放在methods里面

//滑动切换swiper
tabChange(e) {
    const tabIndex = e.detail.current
    this.tabIndex = tabIndex
}

css样式

.order_top {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #FFFFFF;
}

.swiper_tab_list {
color: #888888;
font-weight: bold;
}

.uni_tab_bar .active {
color: #FEDE33;
margin-top: 17rpx;
background-color: #FFFFFF;
}

.active .swiper_tab_line {
border-bottom: 4rpx solid #FEDE33;
width: 50rpx;
margin: auto;
margin-top: 17rpx;
background-color: #0B9C13;
}

.uni_swiper_tab {
border-bottom: 2rpx solid #eeeeee;
margin-bottom: 15rpx;
}

.order_centext {
height: 800rpx;
position: fixed;
top: 160rpx;
left: 0;
right: 0;
bottom: 0;
background-color: #8A6DE9;
margin-left: 15rpx;
margin-right: 15rpx;
}