开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情 响应式数据的基本实现

uview中的tabbar

uview中tabbar文档也是醉了。没办法没得其他好用的UI库，自己开发成本高。将就用吧。

自定义tabbar自然是不用原来的tabbar，但是自定义说到底就是画了一个tabar的UI，tabbar的切换方法还是调不了。所以在pages.json中还是得配置tabbar的，这就造成了两个tabar显示在界面上，所以我们需要隐藏原来的tabar，用的只是uni.switchTab方法。

既然只是一个画的一个tabbar的view 那么怎么实现tab的效果呢。

有两种。一种

大致

• v-if
• 将tabbar的自定义view提成组件，每个tab中都引入tabbar组件。相当于在多个tab页面画了多份tabbar。

实现

第二种

// pages.json

	"tabBar": {
		"list": [
			{"pagePath": "pages/tabBar/home/home"},
			{"pagePath": "pages/tabBar/second/second"},
			{"pagePath": "pages/tabBar/third/third"},
			{"pagePath": "pages/tabBar/fourth/fourth"},
                        {"pagePath": "pages/tabBar/myself/myself"},

		]
	},

//组件 f-tabbar.vue

<template>
    <view>
        <view :class="[isFixed?'f-fixed':'']">
            <u-tabbar
				:value="activeTabBar"
            	@change="onTabbar"
            	:fixed="false"
            	:placeholder="false"
                :activeColor="activeColor || PrimaryColor"
                :inactiveColor="inactiveColor"
            >   
                <block v-for="(item,index) in list" :key="index">
                    <!-- 自定义icon -->
                    <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
                        <view slot="active-icon">
                            <!-- <view class="custom-icon" :class="['custom-icon-'+item.iconFill]" style="font-size: 20px;" :style="{color:activeColor || PrimaryColor}"></view> -->
                            <!-- 自定义图标 -->
							<!-- <f-icon :name="item.iconFill" size="40" :color="activeColor || PrimaryColor"></f-icon> -->
							<!-- 图片路径 -->
							<image class="icon" :src="item.iconFill"></image>
						</view>
                        <view slot="inactive-icon">
                            <view class="custom-icon" :class="['custom-icon-'+item.icon]" style="font-size: 20px;" :style="{color:inactiveColor}"></view>
                            <!-- 自定义图标 -->
							<!-- <f-icon :name="item.icon" size="40" :color="inactiveColor"></f-icon> -->
							<!-- 图片路径 -->
							<image class="icon" :src="item.icon"></image>
                        </view>
                    </u-tabbar-item>
                </block>
            </u-tabbar>
            <!-- 苹果安全距离-默认20px -->
            <view :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',background:'#fff'}"></view>
        </view>
        <!-- 防止塌陷高度 -->
        <view v-if="isFixed && isFillHeight" :style="{height:systemInfo.tabbarH+'px'}"></view>
		<!-- #ifdef H5 -->
		<u-safe-bottom></u-safe-bottom>
		<!-- #endif -->
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import base from '../../utils/systemInfo.js';
export default {
    name: 'q-tabbar',
    props:{
        // 是否固定在底部
        isFixed:{
            type:Boolean,
            default:true,
        },
        // 是否设置防止塌陷高度
        isFillHeight:{
            type:Boolean,
            default:true,
        },
        // 选中的颜色--为空显示主题色
        activeColor:{
            type:String,
            default:'#08439A',
        },
        // 未选中颜色
        inactiveColor:{
            type:String,
            default:'#C1C9D4',
        },
  
        // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
        badgeStyle: {
            type: [Object, String],
            default: uni.$u.props.tabbarItem.badgeStyle
        }
    },
	computed:{
	    ...mapState(['PrimaryColor']),
	},
    data(){
        return {
			safeAreaInsetBottom:false,
            systemInfo:base.systemInfo,
            activeTabBar:this.activeTabBar,
            path:'', //当前路径
            list:[{ 
                name: '首页',
                url: 'pages/tabBar/home/home',
                icon: 'home',
                iconFill: 'home-filling'
            },
            {
                name: '消息',
                url: 'pages/tabBar/second/second',
                icon: 'second',
                iconFill: 'second-filling',
                badge: 16
            },
	
			{
			    name: '购物车',
			    url: 'pages/tabBar/third/third',
			    icon: 'third',
			    iconFill: 'third-filling',
			    badge: 16
			},
			{
			    name: '交易',
			    url: 'pages/tabBar/fourth/fourth',
			    icon: 'fourth',
			    iconFill: 'fourth-filling',
			    badge: 16
			},
            {
                name: '我的',
                url: 'pages/tabBar/myself/myself',
                icon: 'my',
                iconFill: 'my-filling',
                dot: true
            }]
        }
    },
    created() {
    	//获取页面路径
    	let currentPages = getCurrentPages();
    	let page = currentPages[currentPages.length - 1];
    	this.path = page.route;
        //获取页面路径
        this.list.forEach((item,index)=>{
            if(this.path == item.url){
                this.activeTabBar = index
            }
        })
		// #ifdef H5
		this.safeAreaInsetBottom = true
		// #endif
    },
    methods:{
        onTabbar(index){
			console.log(this.list[index].url)
            if (this.path !== this.list[index].url) {
            	uni.switchTab({
            		url: '/' + this.list[index].url
            	});
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.f-fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
	.icon{
	    width: 20px;
	    height: 20px;
	}
}
</style>

//home.vue

<templete>
    <f-tabbar></f-tabbar>
</templete>

//second.vue

<templete>
    <f-tabbar></f-tabbar>
</templete>

//third.vue ......

最后隐藏原生的tabbar

//app.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {			
			uni.hideTabBar({})
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

方法一

<templete>
   <view v-if="value2 === '首页'">
   </view>
      <view v-if="value2 === '放映厅'">
   </view>
    <view v-if="value2 === '直播'">
   </view>
      <view v-if="value2 === '我的'">
   </view>

    <u-tabbar
            :value="value2"
            :placeholder="false"
            @change="name => value2 = name"
            :fixed="false"
            :safeAreaInsetBottom="false"
    >
            <u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item>
            <u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item>
            <u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
            <u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
    </u-tabbar>
</templete>

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情 响应式数据的基本实现