小程序自定义tabBar，uniapp自定义tabBar
cover-view
覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。
注意：只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。
1、支持background-color，不支持background-image，如果你发现你的素材在真机出不来，而且你又设置了背景图片的话，那你可以把这些元素全部替换成cover-image。
2、不支持overflow: visible也是有点坑，这样的话，你想超出依然显示，就需要设置一个同级元素并提升层级才能达到效果了。
3、如果里面有cover-image超出\溢出的话不显示会剪切掉，具体放大外部cover-view，里面做外边距（margin）调整
cover-image
覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。
cover-image发现了两个问题：
1、虽说和image组件基本一样，但是设置mode属性也就是图片裁剪、缩放的模式无效
2、宽度固定，高度auto，时，按照正常效果应该是图片按比例伸缩展示，但是发现该组件高度一直为0，只能根据应用场景寻找其他替代方案了。
闲聊：一般自定义底部导航基本都是中间有个另类的需求，如：拍照，扫码，发布之类的直接入口
这里解释下官方提供的自定义custom-tab-bar 只需要自定义重新写样式就可以了，本文提供的是非官方自己写的
开发小程序中有时候会遇到比较“奇葩”的需求，tabBar突出（一般是拍照或者扫码类的）这时候原生的tabBar就无法使用了，需要自定义Component (tabBar)
正文
如果需要使用自定义tabbar的话，app.json需要设置tabBar值
app.json 代码供参考
"tabBar": {
"custom":true,
"color": "#999999",
"selectedColor":"#333333",
"borderStyle":"black",
"backgroundColor":"",
"list": [
{
"pagePath": "pages/shopList/shopList",
"iconPath": "/img/img/na04.png",
"selectedIconPath": "/img/img/na04s.png",
"color": "#999999",
"selectColor": "#333333",
"text": ""
},
{
"pagePath": "pages/index/index",
"iconPath": "/img/img/na02.png",
"selectedIconPath": "/img/img/na02s.png",
"color": "#999999",
"selectColor": "#333333",
"text": ""
},
{
"pagePath": "pages/helpCenter/helpCenter",
"iconPath": "/img/img/icon_saomia.png",
"selectedIconPath": "/img/img/icon_saomia.png",
"color": "#999999",
"selectColor": "#333333",
"text": ""
},
{
"pagePath": "pages/helpCenter/helpCenter",
"iconPath": "/img/img/na01.png",
"selectedIconPath": "/img/img/na01s.png",
"color": "#999999",
"selectColor": "#333333",
"text": ""
},
{
"pagePath": "pages/user/user",
"iconPath": "/img/img/na03.png",
"selectedIconPath": "/img/img/na03s.png",
"color": "#999999",
"selectColor": "#333333",
"text": ""
}
]
},注："custom":true 使用自定义tabBar 的话 "custom" 值必须为true
先贴wxml代码部分，在来讲讲为啥要使用cover-view来做tabBar而不是使用view
{{item.text}}
因为在底部的4个tab页面 有一个是地图MAP原生组件，而在微信版本7.0.5以下版本是无法使用view的，7.0.5以上包括7.0.5不受限制，亲测7.0.5版本以上包括7.0.5版本在map原生组件情况下是可以使用view的。具体详见小程序原生组件，在当前没有地图模块时建议使用view 去做，因为view去写界面的话会对iPhoneX及以上的非常规屏很好的兼容性，而cover-view由于不支持border单边、fixed的左右对齐之类的等等，详见 cover-view的 BUG&TIP第11条
wxss部分
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 172rpx;
display: flex;
/* padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); */
z-index: 0;
}
.tab-bar-back {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 172rpx;
z-index: 1;
}
.fixeds {
display: flex;
/* padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom); */
width: 100vw;
justify-content: space-between;
align-items: flex-end;
height: 172rpx;
position: relative;
z-index: 2;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 98rpx;
color: #999;
background-color: #fff;
}
.tab-bar-item cover-image {
width: 46rpx;
height: 46rpx;
}
.tab-bar-item image {
width: 46rpx;
height: 46rpx;
}
.tab-bar-yixing {
height: 172rpx;
position: relative;
z-index: 0;
border-radius: 144rpx
}
.tab-bar-yixing cover-image {
width: 144rpx;
height: 144rpx;
position: relative;
z-index: 6;
border-radius: 144rpx;
}
.viewImg{
margin-bottom: 6rpx;
}
.tab-bar-yixing .viewImg{
width: 144rpx;
height: 144rpx;
margin-bottom:18rpx;
position: relative;
z-index: 6;
border-radius: 144rpx;
overflow: hidden;
}
.tab-bar-yixing image {
width: 144rpx;
height: 144rpx;
margin-bottom:24rpx;
position: relative;
z-index: 6;
}
.absout{
position: fixed;
z-index: 3;
width: 100%;
height: 80rpx;
bottom: 0;
background-color: #ffffff;
}
.tab-bar-item cover-view {
font-size: 10px;
}
.tab-bar-item view {
font-size: 10px;
}注：padding-bottom: constant(safe-area-inset-bottom);在使用cover-view模式下IphoneX及以上机型底部会留空白，所以我注释掉了，采用了一个底部80的高度白底的cover-view遮盖
js的部分代码
Component({
data: {
isIphomex: app.upVersions(),
selected: 0,
color: "#999999",
selectedColor: "#333333",
list:[],
},
attached() {
this.setData({
list: [{
pagePath: "/pages/shopList/shopList",
iconPath: "/img/img/na04.png",
selectedIconPath: "/img/img/na04s.png",
color: '#999999',
selectedColor: '#333333',
text: 首页
}, {
pagePath: "/pages/index/index",
iconPath: "/img/img/na02.png",
selectedIconPath: "/img/img/na02s.png",
color: '#999999',
selectedColor: '#333333',
text: 地图
}, {
pagePath: "/pages/helpCenter/helpCenter",
iconPath: "/img/img/icon_saomia.png",
selectedIconPath: "/img/img/icon_saomia.png",
color: '#999999',
selectedColor: '#333333',
text: "" // 扫码非人类设计突出的部分
}, {
pagePath: "/pages/shopCat/index",
iconPath: "/img/img/na01.png",
selectedIconPath: "/img/img/na01s.png",
color: '#999999',
selectedColor: '#333333',
text: 购物车
}, {
pagePath: "/pages/user/user",
iconPath: "/img/img/na03.png",
selectedIconPath: "/img/img/na03s.png",
color: '#999999',
selectedColor: '#333333',
text: 个人中心
}]
})
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.paths
if (data.indexsels != 2) {
wx.switchTab({ url });
this.setData({ selected: data.indexsels })
} else {
wx.scanCode({
success: (res) => {
if (res.errMsg == "scanCode:ok") {
// 扫码成功
} else {}
},
fail: err => {
console.log("扫描err:" + JSON.stringify(err));
}
})
}
}
}
})JSON文件里面 设置
{
"component": true
}
app.upVersions() 为当前封装的公共部分的判断当前用户手持终端设备是否是iPhoneX及以上机型，具体详见下方upVersions函数
注：官方提供的 只需要使用这圈住的if这段，放在四个页面的onShow 函数生命周期里，selected为当前选中的，底部的页面都需要写，哪个点击带入的就是哪个0-4，扫码或拍照的不设置
判断机型upVersions函数
/**
* 判断获取当前机型是否是iPhoneX及以上机型
*/
upVersions()=> {
let tmps = ['iPhone X', 'iPhone 11'], flag= false;
for (let i in tmps) {
// 微信版本
if (wx.getSystemInfoSync().model.search(tmps[i]) > -1) {
flag = true
break;
}
// uniapp版本
if (uni.getSystemInfoSync().model.search(tmps[i]) > -1) {
flag = true
break;
}
}
return flag
},参考官方 tabBar 自定义