1.? ?目錄結(jié)構(gòu)必須按照如圖所示，在src 目錄下?

?2. index.js

Component({
	data: {
		selected: 0,
		color: '#7A7E83',
		selectedColor: '#3cc51f',
		list: [
			{
				pagePath: '/pages/index/index',
				iconPath: '/static/tabbar/index.png',
				selectedIconPath: '/static/tabbar/index_selected.png',
				text: '首頁'
			},
			{
				pagePath: '/pages/mine/index',
				iconPath: '/static/tabbar/mine.png',
				selectedIconPath: '/static/tabbar/mine_selected.png',
				text: '我的'
			}
		]
	},
	attached() {},
	methods: {
		switchTab(e) {
			const data = e.currentTarget.dataset
			if (data.index === this.data.selected) {
				return
			}
			const url = data.path
			wx.switchTab({ url })
			this.setData({
				selected: data.index
			})
		}
	}
})

3.? index.html

<view class="tabBar">
    <view class="border"></view>
    <view wx:for="{{list}}" wx:key="index" class="tabBarItem" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <image class="image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
        <view class="text" style="color: {{selected === index ? selectedColor : color}}">
            {{item.text}}
        </view>
    </view>
</view>

4.? wxss

.tabBar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	height: 50px;
	background: white;
	display: flex;
	padding-bottom: env(safe-area-inset-bottom);
}

.border {
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 1rpx;
	z-index: 2;
	transform: scaleY(0.5);
}

.tabBarItem {
	flex: 1;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.tabBarItem .image {
	width: 20px;
	height: 20px;
	margin-bottom: 4px;
}

.tabBarItem .text {
	font-size: 12px;
}

5. index.json

{
	"component": true
}

?按照微信官方文檔，以及代碼片段，需要在tabbar 頁面中onshow生命周期內(nèi)設(shè)置 tabbar 的選中狀態(tài)，但是在 uniapp 創(chuàng)建的 頁面中是 this 是不包含 getTabBar 方法的， 只有通過?this.$mp.page或者 this.$scope 可以獲取到

async onShow() {
		if (typeof this.$mp.page.getTabBar === 'function' &&                 this.$mp.page.getTabBar()) {
			console.log(this)
			this.$mp.page.getTabBar().setData({
				selected: 0
			})
		}
	},

async onShow() {
		if (typeof this.$scope.getTabBar === 'function' && this.$scope.getTabBar()) {
			console.log(this)
			this.$scope.getTabBar().setData({
				selected: 0
			})
		}
	},

通過設(shè)置當(dāng)前頁面下的 tabbar 選中狀態(tài)，自定義tabbar才能正常使用文章來源地址http://www.zghlxwxcb.cn/news/detail-687854.html

到了這里，關(guān)于uniapp 開發(fā)微信小程序 中使用 custom-tab-bar創(chuàng)建自定義tabbar的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！