Recently, I am making a custom applet for a client. The client doesn't like the tabbar that comes with the applet, but wants a cool and unusual tabbar. After reading the applet developer documentation, it can be executed.
Refer to the official website to customize the tabBar
Custom tabBar | WeChat Open Documentation (qq.com)
According to the official document, it took 1.5 days to complete the customization of the tabbar. The effect picture is as follows:
1. Configuration information
1. Specify the custon field in the tabBar item in app.json;
"tabBar": {
"custom": true,
"list": [
{
"pagePath": "pages/map/map",
"iconPath": "img/tab_home_nor.png",
"selectedIconPath": "img/tab_home_sld.png",
"text": "首页"
},
{
"pagePath": "pages/cafe/cafe",
"iconPath": "img/tab_coffee_nor.png",
"selectedIconPath": "img/tab_coffee_sld.png",
"text": "cafe"
},
{
"pagePath": "pages/main/main",
"iconPath": "img/tab_scan.png",
"selectedIconPath": "img/tab_scan.png",
"text": "扫码 "
},
{
"pagePath": "pages/record/record",
"iconPath": "img/tab_bill_nor.png",
"selectedIconPath": "img/tab_bill_sld.png",
"text": "订单"
},
{
"pagePath": "pages/mine/mine",
"iconPath": "img/tab_user_nor.png",
"selectedIconPath": "img/tab_user_sld.png",
"text": "我的"
}
]
},
2. Add code files
This directory structure is fixed, you must create a folder in the root directory of the project: custom-tab-bar , and the corresponding files, the folder name should not be misspelled, otherwise the custom components cannot be referenced.
- custom-tab-bar/index.wxml
<view class="tab-bar" style='height:{
{100}}rpx;'>
<view wx:for="{
{list}}" wx:key="index" class="tab-bar-item" data-path="{
{item.pagePath}}" data-index="{
{index}}" bindtap="switchTab">
<image wx:if="{
{item.isSpecial != null && item.isSpecial == true}}" src="{
{item.iconPath}}" class='centerImage'></image>
<image wx:else class='cover-image' src="{
{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
<view class="coverStyle" style="color: {
{selected === index ? selectedColor : color}}">{
{item.text}}</view>
</view>
</view>
- custom-tab-bar/index.js
// custom-tab-bar/index.js
const app = getApp();
Component({
data: {
selected: 0,
color: "#333",
selectedColor: "#236BC1",
list: [
{
"pagePath": "../map/map",
"iconPath": "../img/tab_home_nor.png",
"selectedIconPath": "../img/tab_home_sld.png",
"text": "首页",
"isSpecial": false
},
{
"pagePath": "../cafe/cafe",
"iconPath": "../img/tab_coffee_nor.png",
"selectedIconPath": "../img/tab_coffee_sld.png",
"text": "cafe",
"isSpecial": false
},
{
"pagePath": "../main/main",
"iconPath": "../img/tab_scan.png",
"selectedIconPath": "../img/tab_scan.png",
"text": " ",
"isSpecial": true
},
{
"pagePath": "../record/record",
"iconPath": "../img/tab_bill_nor.png",
"selectedIconPath": "../img/tab_bill_sld.png",
"text": "订单",
"isSpecial": false
},
{
"pagePath": "../mine/mine",
"iconPath": "../img/tab_user_nor.png",
"selectedIconPath": "../img/tab_user_sld.png",
"text": "我的",
"isSpecial": false
}
],
//适配IphoneX的屏幕底部横线
// isIphoneX: app.globalData.isIphoneX
},
attached() {},
methods: {
switchTab(e) {
console.log("e",e)
const dataset = e.currentTarget.dataset
const path = dataset.path
const index = dataset.index
//如果是特殊跳转界面
if (this.data.list[index].isSpecial) {
wx.navigateTo({
url: path
})
} else {
console.log(path,index)
//正常的tabbar切换界面
wx.switchTab({
url: path
})
this.setData({
selected: index
})
}
}
}
})
Stepping on the pit record: According to the file location, the pagePath should be ../pages/main/main, but in my project, I skipped the pages and entered the mian screen, so you should refer to it according to your own project;
- custom-tab-bar/index.json
{
"component": true
}
- custom-tab-bar/index.wxss
/* custom-tab-bar/index.wxss */
.tab-bar {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 120rpx;
/* background: white; */
display: flex;
flex-direction: row;
/* padding-bottom: env(safe-area-inset-bottom); */
background-image: url(data:image/png;base64,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);
background-repeat:no-repeat;
background-size: cover;
}
.tab-bar-border {
/* background-color: #e4e4e4; */
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 18rpx;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 16rpx;
/* background:#fff; */
}
.cover-image {
width: 46rpx;
height: 46rpx;
}
.coverStyle{
font-size: 22rpx;
}
.centerImage {
width: 130rpx;
height: 130rpx;
position: absolute;
top: -50rpx;
border-radius: 50%;
/* border: 6rpx solid #fff; */
}
Stepping on the pit record: the bottom tabbar has an irregular white background, and it is difficult to implement the code, so let ui cut a background of the opposite sex, use background-image to import, and the result is an error:
Reason for the error: The WeChat applet sets the background through background-image: only online images and base64 images are supported, and local images are not supported.
Convert the image to text in base64 format on the website http://imgbase64.duoshitong.com/ , and then import it.
3. Developer tool version issues
Finally, a strange problem appeared: a tabbar appeared on the secondary page that should not have a custom tabbar. I checked the code and found that there was no problem, so I tried to preview it on my mobile phone, and the strange problem disappeared. I guess it might be a WeChat developer. There was a problem with the version of the tool, so the debugging basic library was upgraded to a version, and the problem was solved~ hahahaha
The above is the implementation process of this custom tabbar. Is the effect not bad? Let’s go after clicking like it~