第一步：在pages.json里定義自己tabbar路徑，定義的時候只需要寫上頁面路徑即可

?第二步：自定義tabbar頁面，為了實(shí)現(xiàn)點(diǎn)擊動作的動態(tài)效果，需要用到watch監(jiān)聽父組件傳來的值的改變

?自定義tabbar頁面全部代碼

<template>
	<view class="tab_bar">
		<view class="tabbarBox">
			<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
				<view class="menuBox" @click="goPages(item.pageIndex.index)">
					<view class="menuIcon">
						<image v-if="item.pageIndex.index!=selectIndex" class="img"                 :src="item.iconPath"></image>
						<image v-else class="img" :src="item.selectIconPath"></image>
					</view>
					<view class="menuName">
						<text :class="item.pageIndex.index==selectIndex?'TextColor':'Text'" >{{item.tabbarName}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	props: {
		page: {
			type: String,
			default: "homeIndex"
		}
	},
	watch: {
		page: {
			handler(value) {
				this.selectIndex = value;
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			selectIndex: "",
			tabBarList: "",
		}
		
	},
	//uniapp子組件不支持應(yīng)用生命周期，所以只能用vue生命周期
	created() {

        //tabbar數(shù)據(jù)，這兒也支持后臺定義通過接口獲取數(shù)據(jù)
        this.tabBarList = [{
    			"tabbarName":"", //tababr名稱
				"iconPath":"", //tabbar icon
				"selectIconPath":"", //tabbar 選擇icon
				"pageIndex":"" //頁面路徑
            }]
		
	},methods: {
	
		
		//進(jìn)入tabble頁
		goPages(pageIndex) {
			uni.switchTab({
				url:pageIndex
			})
		},
		
	},
}
</script>
<style lang="scss">
.tab_bar {
	width: 100vw;
	height: 120rpx;
	position: fixed;
	bottom: 30rpx;
	/* 模糊大小就是靠的blur這個函數(shù)中的數(shù)值大小 */
	backdrop-filter: blur(10px);
	border-radius: 60rpx;
		
.tabbarBox {
	display: flex;
	margin-top: 10rpx;
	justify-content: space-evenly;
	
	
.handleBox {
	width: 20vw;
	height: 110rpx;
	

.menuBox {
	padding: 0rpx 20rpx;
	width: 120rpx;
	height: 98%;
	text-align: center;

.img {
	width: 50rpx;
	height: 50rpx;
	}
}
	}
}
	}

.Text {
	font-size: 24rpx;
	font-family: Cochin, serif;
	font-weight: 900;
}

.TextColor {
	@extend .Text;
	color: #d81e06;
}

</style>

注：該頁面可以直接用組件的方式來放，因?yàn)閡niapp支持easycom模式，這樣比較簡單，不用全局注冊

?第三步：隱藏原生tabbar，在App.vue 文件里面onshow寫上 uni.hideTabbar()；也可直接在pages.json中通過tabbar內(nèi)custom配置項(xiàng)關(guān)閉默認(rèn)tabbar

方式一：

方式二：

第四步：引入table頁面，如果是使用了easycom規(guī)則的組件，可以直接在頁面使用

?這兒父組件頁面要動態(tài)傳值，就是為了告訴組件現(xiàn)在的停留頁面，也是為了組件動態(tài)顯示提供基礎(chǔ)條件

注意：這個傳值必須是動態(tài)傳值，所以要放在onshow里面，當(dāng)頁面切換的時候就改變值

?當(dāng)所有頁面都引入組件后就可以查看效果了

效果圖：

tabbar用的磨砂背景，看著感覺還不錯

文章來源地址http://www.zghlxwxcb.cn/news/detail-547079.html

到了這里，關(guān)于微信小程序使用uniapp自定義tabbar的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！