uni-app 自定義 簡單 底部tab

 

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

 

先創建三個頁面 分別為 home.vue ， classify.vue， my.vue 。 以下為基礎樣式

 

創建一個 base_tab 為主頁面，在base_tab 引入先前創建好的三個頁面，關於組件的引用可自行去官網查看

//導入組件
import Home from '@/components/home'
import Classify from '@/components/classify'
import My from '@/pages/index/index'

export default {
    components: {
            Home,
            Classify,
            My
    }
}

導入組件之后，先讓組件在頁面上顯示出來，然后在開始在頁面布局

v-if 里的current 是在data里定義的，初始值為0

v-if="current == 0" ，current 可以理解為id，根據id == 幾來顯示頁面

當子頁面在父頁面 顯示出來后，開始定義底部tab樣式

<view style="height: 90vh;">
    <!-- 三個子頁面 -->
    <Home v-if="current == 0"></Home>
    <Classify v-if="current == 1"></Classify>
    <My v-if="current == 2"></My>
    <!-- 底部tab樣式 -->
    <view class="tab">
        <!-- 循環 tabbar里面的數據 -->
        <block v-for="(item,index) in tabbar" :key="index">
            <view class="tab_tiem" :class="[current == index ? 'active': '']" :data-index="index" @tap="tabSwitch">
                <view class="item_img">
                    <image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>
                </view>
                  <view class="item_name">
                    {{item.text}}
               </view>
               </view>
        </block>
    </view>
</view>

tab 顯示的圖標 以三元運算來進行 判斷 是否選中狀態

<image class="image" :src="current != index ? item.img :item.slectImg " mode=""></image>

 @tap="tabSwitch" 點擊事件

export default {
    methods: {
        tabSwitch(e) {
            console.log(e);
            let index = e.currentTarget.dataset.index
            this.current = index
        }
    },
}

循環 tabbar 數據

export default {
        data() {
            return {
                current: 0, 
                tabbar: [{
                        img: '../../static/tab/home.png',  //未選中
                        slectImg: '../../static/tab/home_select.png', //已選中
                        text: '首頁',
                    },
                    {
                        img: '../../static/tab/classify.png',
                        slectImg: '../../static/tab/classify_select.png',
                        text: '分類',
                    },
                    {
                        img: '../../static/tab/my.png',
                        slectImg: '../../static/tab/my_select.png',
                        text: '我的',
                    }
                ],
            }
        },
    }

最后css 樣式

<style lang="scss">
    .tab {
        width: 100%;
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1024;
        background-color: #FFFFFF;
        height: 100rpx;
        left: 0;
        bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1rpx solid #888888;

        .tab_tiem {
            flex: 1;
            width: 25%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 24rpx;
            color: #666;
            height: 80rpx;
        }

        .item_img {
            padding-top: 4rpx;
        }

        .image {
            height: 30rpx;
            width: 30rpx;
        }

        .tab::before {
            color: red;
        }

        .item_name {
            font-weight: bold;
            transform: scale(0.8);
            transform-origin: center 100%;
            line-height: 30rpx;
        }

        .active {
            // color: var(--color) !important;
            color: red;
        }
    }
</style>