目录
实现步骤
1、配置信息
2、添加代码文件。
3、在该目录下编写代码即可。
二、在app.json里面添加tabBar配置
三.、在custom-tab-bar添加配置
1. 在custom-tab-bar创建如下目录
2.给index.wxml添加tabBar的结构代码
3. 给index.js 添加数据配置 和 事件方法
4. 给index.wxss 添加样式
四、tabbar图标切换 要点击两次才能有选中状态
五 原生wxtabBar的设置（右上角红点和消息）
实现步骤
参考官方网站，自定义tabBar
自定义 tabBar | 微信开放文档
1、配置信息
需要在app.json中设置一个属性custom，为true ，代表全局开启自定义tab
注意：当我们设置了custom属性之后，那么tabBar下面的list数组是否可以删了呢？
答：不可以，文档里面已经明确表示是不可以删的，需要保持完整配置项以及低版本里面可以不适用自定义tabBar，因此需要兼容、
2、添加代码文件。
这个目录结构是固定的 ，必须要在项目根目录创建一个文件夹： custom-tab-bar，以及对应的文件。
第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件当做tab渲染出来
3、在该目录下编写代码即可。
二、在app.json里面添加tabBar配置
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/goods/index"
],
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/goods/index",
"text": "商品"
}]
}三.、在custom-tab-bar添加配置
1. 在custom-tab-bar创建如下目录
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss2.给index.wxml添加tabBar的结构代码
1、为什么canvas组件总是会在最上层？
由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。
2、 如何解决canvas层级最高问题？
方法一：用原生组件覆盖原生组件
为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
比如：cover-view只支持嵌套cover-view、cover-image、button。
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<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}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>3. 给index.js 添加数据配置 和 事件方法
Component({
data: {
selected: 0,
color: "#7A7E83",
selectedColor: "#3cc51f",
list: [{
pagePath: "/pages/index/index",
iconPath: "/image/home2_icon.png",
selectedIconPath: "/image/home1_icon.png",
text: "首页"
}, {
pagePath: "/pages/goods/index",
iconPath: "/image/readTrain2_icon.png",
selectedIconPath: "/image/readTrain1_icon.png",
text: "商品"
}]
},
attached() {
},
methods: {
switchTab(e) {
console.log("执行跳转",e);
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})4. 给index.wxss 添加样式
/* custom-tab-bar/index.wxss */
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
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;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}此时，通过点击切换页面，就可以实现
=》如果在选择点击切换按钮时，页面没根据tabBar进行切换，问题很可能能在custom-tab-bar目录的index.js 的list数据配置的页面路径，一定要/开头，如/pages/goods/index，这才能找到页面。
四、tabbar图标切换 要点击两次才能有选中状态
在`/pages/index目录的index.js文件，的onShow生命周期方法，添加如下代码
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
//唯一标识（其它设置不同的整数）
selected: 0
})
}
},五 原生wxtabBar的设置（右上角红点和消息）
wx.setTabBarBadge(Object object) 为 tabBar 某一项的右上角添加文本文章来源：https://www.toymoban.com/news/detail-562224.html
wx.removeTabBarBadge(Object object) 移除 tabBar 某一项右上角的文本文章来源地址https://www.toymoban.com/news/detail-562224.html
tabBarTitle(num) {
console.log(num, 'numnumnumnumnum');
if (num == '') {
wx.removeTabBarBadge({//移除tabbar右上角的文本
index: 1,//tabbar下标
})
} else {
wx.setTabBarBadge({//tabbar右上角添加文本
index: 1,//tabbar下标
text: num.toString() //显示的内容,必须为字符串
})
}
}到了这里，关于微信小程序——自定义底部tabBar的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
