uView2.0 实现自定义tabBar 全代码篇

// components/tabBar/tabBar tabIndex直接定义在vuex里了==

<template>
    <view class="bottom-menu">
        <u-tabbar
            :value="tabIndex"
            :list="list"
            :mid-button="true"
            @change="onChangBar"
            active-color="#FF5394"
            inactiveColor="#666666"
        >
            <u-tabbar-item
                v-for="(tabbar, index) in list"
                :text="tabbar.text"
                :icon="tabbar.iconPath"
                :key="index"
            ></u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
import {mapState} from "vuex";

export default {
    data() {
        return {
            list: [
                {
                    pagePath: "pages/index/index",
                    iconPath: "home",
                    selectedIconPath: "home-fill",
                    midButton: true,
                    text: "创作",
                    customIcon: false,
                },
                {
                    pagePath: "pages/picList/picList",
                    iconPath: "photo",
                    selectedIconPath: "photo-fill",
                    text: "艺廊",
                    customIcon: false,
                },
                {
                    pagePath: "pages/works/works",
                    iconPath: "play-right",
                    selectedIconPath: "play-right-fill",
                    text: "画板",
                    customIcon: false,
                },
                {
                    pagePath: "pages/mine/mine",
                    iconPath: "account",
                    selectedIconPath: "account-fill",
                    text: "我的",
                    isDot: false,
                    customIcon: false,
                },
            ],
        };
    },
    computed: mapState({
        tabIndex: "tabIndex",
    }),
    methods: {
        async onChangBar(index) {
            if (this.tabIndex !== index) {
                await uni.$u.route({
                    type: "switchTab",
                    url: this.list[index].pagePath,
                });
                this.$store.state.tabIndex = index;
            }
        },
    },
};
</script>

<style lang="scss"></style>

// pages.json 增加一个tabBar配置

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "white",
    "backgroundColor": "#f4f5f7",
    "custom": true,
    "list": [
        {
            "pagePath": "pages/index/index"
        },
        {
            "pagePath": "pages/picList/picList"
        },
        {
            "pagePath": "pages/works/works"
        },
        {
            "pagePath": "pages/mine/mine"
        }
    ]
},

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        tabIndex: 0,
    },
});
export default store;

// main.js

Vue.component("tab-bar", tabBar); //使用tabBar组件

//store相关
Vue.prototype.$store = store;
const app = new Vue({
    store,
    ...App,
});