新建组件
image.png
tabbar.wxml
<view class="tabbar_box {{isIphoneX?'iphoneX-height':''}}" style="background-color:{{tabbar.backgroundColor}}">
<block wx:for="{{tabbar.list}}" wx:key="{{item.pagePath}}">
<navigator wx:if="{{item.isSpecial}}" class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
<view class='special-wrapper'>
<image class="tabbar_icon" src="{{item.iconPath}}"></image>
</view>
<image class='special-text-wrapper'></image>
<text>{{item.text}}</text>
</navigator>
<navigator wx:else class="tabbar_nav" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
tabbar.wxss
.tabbar_box {
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
height: 118rpx;
box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.1);
}
.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: 56rpx;
height: 56rpx;
margin-bottom: 6rpx;
}
.special-wrapper {
position: absolute;
left: 30rpx;
top: -24rpx;
width: 94rpx;
height: 96rpx;
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: 94rpx;
height: 96rpx;
position: absolute;
left: 0;
top: -8rpx;
}
.special-text-wrapper {
width: 56rpx;
height: 56rpx;
}
tabbar.js
// tabBarComponent/tabBar.js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
tabbar: {
type: Object,
value: {
"color": "#D2D2D2",
"selectedColor": "#FFC000",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "/pages/home/index",
"iconPath": "/tabbar/shouye.png",
"selectedIconPath": "/tabbar/shouye02.png",
"text": "首页"
},
{
"pagePath": "/pages/reserve/index",
"iconPath": "/tabbar/yuding.png",
"selectedIconPath": "/tabbar/yuding02.png",
"text": "预定"
},
{
"pagePath": "/pages/match/index",
"iconPath": "/tabbar/bisai.png",
"selectedIconPath": "/tabbar/bisai.png",
"text": "比赛",
"isSpecial": true
},
{
"pagePath": "/pages/club/index",
"iconPath": "/tabbar/julebu.png",
"selectedIconPath": "/tabbar/julebu02.png",
"text": "俱乐部"
},
{
"pagePath": "/pages/my/index",
"iconPath": "/tabbar/wode.png",
"selectedIconPath": "/tabbar/wode02.png",
"text": "我的"
}
]
}
}
},
/**
* 组件的初始数据
*/
data: {
isIphoneX: app.globalData.systemInfo.model.includes("iPhone X")
},
/**
* 组件的方法列表
*/
methods: {
}
})
tabbar.json
{
"component": true,
"usingComponents": {}
}
app.js
//app.js
App({
onLaunch: function(options) {
//隐藏系统tabbar
this.hidetabbar();
//获取设备信息
this.getSystemInfo();
},
onShow: function() {
wx.hideTabBar();
},
//封装wx.hideTabBar
hidetabbar() {
wx.hideTabBar({
fail: function() {
setTimeout(function() { // 延时保底
wx.hideTabBar()
}, 500)
}
});
},
getSystemInfo: function() {
let t = this;
wx.getSystemInfo({
success: function(res) {
t.globalData.systemInfo = res;
}
});
},
// 显示tabbar
editTabbar: function() {
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
});
},
globalData: {
systemInfo: null, //客户端设备信息
tabBar: {
"color": "#D2D2D2",
"selectedColor": "#FFC000",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "/pages/home/index",
"iconPath": "/images/tabbar/shouye.png",
"selectedIconPath": "/images/tabbar/shouye02.png",
"text": "首页"
},
{
"pagePath": "/pages/reserve/index",
"iconPath": "/images/tabbar/yuding.png",
"selectedIconPath": "/images/tabbar/yuding02.png",
"text": "预定"
},
{
"pagePath": "/pages/match/index",
"iconPath": "/images/tabbar/bisai.png",
"selectedIconPath": "/images/tabbar/bisai.png",
"text": "比赛",
"isSpecial": true
},
{
"pagePath": "/pages/club/index",
"iconPath": "/images/tabbar/julebu.png",
"selectedIconPath": "/images/tabbar/julebu02.png",
"text": "俱乐部"
},
{
"pagePath": "/pages/my/index",
"iconPath": "/images/tabbar/wode.png",
"selectedIconPath": "/images/tabbar/wode02.png",
"text": "我的"
}
]
}
},
})
app.json
"list": [
{
"pagePath": "pages/home/index",
"iconPath": "images/tabbar/shouye.png",
"selectedIconPath": "images/tabbar/shouye02.png",
"text": "首页"
},
{
"pagePath": "pages/reserve/index",
"iconPath": "images/tabbar/yuding.png",
"selectedIconPath": "images/tabbar/yuding02.png",
"text": "预定"
},
{
"pagePath": "pages/match/index",
"iconPath": "/images/tabbar/bisai.png",
"selectedIconPath": "/images/tabbar/bisai.png",
"text": "比赛",
"isSpecial": true
},
{
"pagePath": "pages/club/index",
"iconPath": "images/tabbar/julebu.png",
"selectedIconPath": "images/tabbar/julebu02.png",
"text": "俱乐部"
},
{
"pagePath": "pages/my/index",
"iconPath": "images/tabbar/wode.png",
"selectedIconPath": "images/tabbar/wode02.png",
"text": "我的"
}
]
页面.json
"usingComponents": {
"tabbar": "/component/custom-tabbar/tabbar"
}
页面 wxml 使用
<tabbar tabbar="{{tabbar}}"></tabbar>
页面 js
//获取应用实例
const app = getApp()
Page({
data: {
tabbar: {}
},
onLoad: function() {
app.editTabbar();
},
onShow: function() {
app.hidetabbar();
},
})
网友评论