uni-app 頂部tabbar切換

 

完成樣式

項目地址：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;
}