微信小程序自定义底部TabBar
想要呈现的效果图：
将TabBar封装成一个组件：
下面是tabbar.wxml的代码：
<view class="tabbar_box {
{isIphoneX?'iphoneX-height':''}}" style="background-color:{
{tabbar.backgroundColor}}">
<block wx:for="{
{tabbar.list}}" wx:key="{
{item.pagePath}}">
<view wx:if="{
{item.isSpecial}}" class="tabbar_nav" hover-class="navigator-hover" url="{
{item.pagePath}}"
style="color:{
{tabbar.color}}" bindtap="shareTherelease" data-url="{
{item.pagePath}}" open-type="navigate">
<view class='special-wrapper'>
<image class="tabbar_icon" src="{
{item.iconPath}}"></image>
</view>
<image class='special-text-wrapper'></image>
<text>{
{
item.text}}</text>
</view>
<view wx:else class="tabbar_nav" hover-class="none" data-url="{
{item.pagePath}}"
style="color:{
{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab" bindtap="onSwitchTab">
<image class="tabbar_icon" src="{
{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{
{
item.text}}</text>
</view>
</block>
</view>
下面是tabbar.wxss的代码：
.tabbar_box{
display: flex;
flex-direction: row;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 98rpx;
}
.tabbar_box.iphoneX-height{
padding-bottom: 66rpx;
}
.middle-wrapper{
position: absolute;
right: 310rpx;
bottom: 0;
background-color: #fff;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
}
.middle-wrapper.iphoneX-height{
bottom: 66rpx;
}
.tabbar_nav{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 20rpx;
height: 100%;
position: relative;
}
.tabbar_icon{
width: 50rpx;
height: 50rpx;
}
.special-wrapper{
position: absolute;
top: -52rpx;
width: 113rpx;
height: 113rpx;
border-radius: 50%;
border-top: 2rpx solid #f2f2f3;
background-color: #fff;
text-align: center;
box-sizing: border-box;
padding: 6rpx;
}
.special-wrapper .tabbar_icon{
width: 88rpx;
height: 88rpx;
padding-top: 7rpx;
}
.special-text-wrapper{
width: 56rpx;
height: 56rpx;
}
然后是tabbar.js中的代码：
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
tabbar: {
type: Object,
value: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/pages/teacher/sign_home",
"text": "首页",
"iconPath": "../../images/home1.png",
"selectedIconPath": "../../images/home2.png"
},
{
"pagePath": "/pages/teacher/sign_launch",
"isSpecial": true,
"text": "发布",
"iconPath": "../../images/publish.png",
"selectedIconPath": "../../images/publish.png",
},
{
"pagePath": "/pages/teacher/sign_my",
"text": "我的",
"iconPath": "../../images/my1.png",
"selectedIconPath": "../../images/my2.png"
}
]
}
}
},
/**
* 组件的方法列表
*/
methods: {
shareTherelease(e) {
console.log(e.currentTarget.dataset.url);
wx.navigateTo({
url: e.currentTarget.dataset.url,
})
},
onSwitchTab(e){
console.log(e.currentTarget.dataset.url)
wx.switchTab({
url: e.currentTarget.dataset.url,
})
}
}
})
在项目中的app.js里面加上如下代码，是配置你自定义的tabbar:
globalData: {
userInfo: null,
tabBar: {
"backgroundColor": "#ffffff",
"color": "#333333",
"selectedColor": "#26C55E",
"list": [
{
"pagePath": "/pages/teacher/sign_home",
"text": "首页",
"iconPath": "../../images/home1.png",
"selectedIconPath": "../../images/home2.png"
},
{
"pagePath": "/pages/teacher/sign_launch",
"isSpecial": true,
"text": "发布",
"iconPath": "../../images/publish.png",
"selectedIconPath": "../../images/publish.png",
},
{
"pagePath": "/pages/teacher/sign_my",
"text": "我的",
"iconPath": "../../images/my1.png",
"selectedIconPath": "../../images/my2.png"
}
]
}
},
editTabbar: function () {
//隐藏系统tabbar
wx.hideTabBar();
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for (let i in tabbar.list) {
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
上方的wx.hidehideTabBar();需要原先在app.json中有其他两个按钮的tabbar
app.json如下:
"tabBar": {
"list": [{
"pagePath": "pages/teacher/sign_home",
"text": "主页面",
"iconPath": "images/home1.png",
"selectedIconPath": "images/home2.png"
},
{
"pagePath": "pages/teacher/sign_my",
"text": "我的",
"iconPath": "images/my1.png",
"selectedIconPath": "images/my2.png"
}
]
},
然后这样就算配置好自己写的tabBar组件了。
使用方法：
需要在含有底部tabBar的所有switchTab的页面中添加组件
比如 “首页” 页面中：
首先是：
sign_home.js中（调用app中的editTabbar方法）
const app = getApp();
Page({
onLoad: function(options) {
app.editTabbar();
},
)}
然后需要在wxml页面中加上组件：
sign_home.wxml中加入
<tabbar tabbar="{
{tabbar}}"></tabbar>
这样，就算使用完成了。