先看看自定義tabBar的效果
??
?可能圖片效果不是很明顯，我用紅框框出來(lái)了，這樣看起來(lái)明顯一點(diǎn)。
接下來(lái)就是具體步驟了
一、
?先在pages里建兩個(gè)文件夾，我現(xiàn)在做的項(xiàng)目tabBar只有兩個(gè)，所以我建了兩個(gè)文件夾，如果大于兩個(gè)用這個(gè)方法也可以，但是不能多于五個(gè)。
app.json中建立mine、和worktable(名字無(wú)所謂)
?
?
"pages": [
"pages/worktable/worktable",
"pages/mine/mine"
]?這就是在app.json中的pages的結(jié)果，會(huì)在pages文件夾中出現(xiàn)兩個(gè)文件夾
?之后的步驟就是按照原先的步驟在app.json中鍵入以下代碼
"tabBar": {
"custom": true,
"list": [{
"pagePath": "pages/worktable/worktable",
"text": "工作臺(tái)"
}, {
"pagePath": "pages/mine/mine",
"text": "我的"
}]
}這樣就會(huì)出現(xiàn)微信小程序本身自帶的tabBar(底部導(dǎo)航欄)
注意：一定要在tabBar中加入"custom":"true",這樣做的目的就是使原先的tabBar消失，為我們自己自定義tabBar做好鋪墊
接下來(lái)開(kāi)始自定義tabBar
首先在根目錄建立一個(gè)文件夾名字為custom-tab-bar 必須為這個(gè)名字
步驟為? 新建文件夾-新建Component
?
下面就是主要代碼了
app.js中的代碼:
globalData: {
selectedIndex:0,
}?
在custom-tab-bar/index.js中粘貼以下代碼：
var app = getApp();
Component({
data: {
selected: '0',
index:'0',
color: "#7A7E83", // 顏色
selectedColor: "#1E70E1", // 被選中顏色
list: [{
pagePath: "/pages/worktable/worktable",
iconPath: "/assets/img/Working-Table/IconPathMenu.png",
selectedIconPath: "/assets/img/Working-Table/SelectedIconPathMenu.png",
text: "工作臺(tái)"
},
{
pagePath: "/pages/mine/mine",
text: "我的",
iconPath: "/assets/img/Working-Table/MineUnSelected .png",
selectedIconPath: "/assets/img/Working-Table/MineSelected.png"
}
]
},
attached() {},
methods: {
switchTab(e) {
var url = e.currentTarget.dataset.path
var index=e.currentTarget.dataset
app.globalData.selectedIndex =e.currentTarget.dataset.index
this.setData({
selected: e.currentTarget.dataset.index
})
// 根據(jù)index判斷，發(fā)布是渲染的時(shí)候是沒(méi)有url的
if (url) {
wx.switchTab({
url
})
}
}
}
})在custom-tab-bar/index.json中粘貼以下代碼：
{
"component": true,
"usingComponents": {}
}在custom-tab-bar/index.wxml中粘貼以下代碼：
<cover-view class="tab-bar">
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab" >
<cover-image src="{{selected == index ? item.selectedIconPath : item.iconPath}}" class="CoverImg">
</cover-image>
<cover-view style="color: {{selected == index ? selectedColor : color}}">{{item.text}}
</cover-view>
</cover-view>
</cover-view>
在custom-tab-bar/index.wxss中粘貼以下代碼：
.tab-bar {
border-top-left-radius: 50rpx;
border-top-right-radius: 50rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 168rpx;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
/* background-color: rgba(0, 0, 0, 0.33); */
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: -50rpx;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}
.CoverImg {
margin-bottom: 10rpx;
}這已經(jīng)完成了很大一部分了，但是這些寫(xiě)完還會(huì)出現(xiàn)問(wèn)題，就是點(diǎn)擊tabBar確實(shí)是跳轉(zhuǎn)了頁(yè)面，但是樣式還沒(méi)有改變，必須點(diǎn)兩次才能使樣式改變。
看了網(wǎng)上很多的教程都沒(méi)有說(shuō)的很清楚
最最最最最最最最最最最最重要的就是：
在你要使用tabBar的頁(yè)面的js文件中的onShow(){}中加入
這個(gè)是worktable中的
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
//唯一標(biāo)識(shí)（其它設(shè)置不同的整數(shù)）
selected: 0
})
}
}? ? ? ? ? 這個(gè)是mine.js中加入onShow(){}
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
//唯一標(biāo)識(shí)（其它設(shè)置不同的整數(shù)）
selected: 1
})
}
}這就可以使用自定義的tabBar了
如果頁(yè)面被影響了，就找到app.json中的"style":?"v2",把"style":?"v2",刪除就可以了
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-482496.html
這樣我們自定義的tabBar就大功告成了。?這樣就可以按照項(xiàng)目需求自定義自己的tabBar，不用苦惱的再去想如何去自定義taBbar了/文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-482496.html
到了這里，關(guān)于微信小程序自定義tabBar(邊框圓角)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
