一.先言：
有时候微信小程序会遇到代码合并，就比如把B小程序代码迁移到A小程序，要使得B作为A小程序的一个子页面子功能。因为本身小程序都有tabbar，原来B也有，这时候就要给B子功能自定义一个tabbar底部导航栏。（注意，这个不是微信小程序自定义tabBar，不需要app.json中设置一个属性custom，因为A的tabbar是不修改不动的，只是在子功能模块多加一个tabbar，相当于只是自定义一个组件。）
二.实现：
1.实现很简单，第一步是创建一个组件文件夹，位置随意，到时引用路径写对就好，这里我定义有‘’首页‘’和‘’我的‘’两个tab：
wxml：
<view class="fix-btm">
<view class="fix-btm-list" catchtap="switchTab" data-url="点击需要跳转的tab页面路径">
<view class="fix-btn-img">
<image class="fix-btm-img" mode="widthFix" src="{{selected==0 ? '点击时图片路径' : '未点击时图片路径'}}" />
<text class="{{selected==0 ? 'active' : ''}}">首页</text>
</view>
</view>
<view class="fix-btm-list" catchtap="switchTab" data-url="点击需要跳转的tab页面路径">
<view class="fix-btn-img">
<image class="fix-btm-img" mode="aspectFit" src="{{selected==1 ? '点击时图片路径' : '未点击时图片路径'}}" />
<text class="{{selected==1 ? 'active' : ''}}">我的</text>
</view>
</view>
</view>
wxss：
/* 底部栏 */
.fix-btm {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 104.166rpx;
background-color: #fff;
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, .1);
}
.fix-btm-list{
flex:1;
overflow: hidden;
}
.fix-btn-img{
width: 100%;
height: 100%;
text-align: center;
position: relative;
}
.fix-btm-img{
width: 33.333rpx;
height: 33.333rpx;
display: block;
padding-top: 19.444rpx;
margin: 0 auto;
}
.fix-btm-list .fix-btn-img .red-dot,
.fix-btm-list .fix-btn-img .red-msg{
width: 16.666rpx;
height: 16.666rpx;
z-index: 1000;
position: absolute;
top: 14rpx;
transform: translateX(30rpx);
background-color: #FF2929;
border-radius: 20rpx;
}
.fix-btm-list .fix-btn-img .red-dot{
right: 50%;
}
.fix-btm-list .fix-btn-img .red-msg{
width: auto;
height: auto;
color: #fff;
font-size: 16.666rpx;
padding: 2rpx 8rpx;
left: 50%;
transform: translateX(50%);
}
.fix-btm-list text{
font-size: 25rpx;
color: #8A8A8A;
}
.fix-btm-list text.active{
color: #0072FF;
}
js：
Component({
/**
* 组件的属性列表
*/
properties: {
selected: {
type:Number,
value:0
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
let url = e.currentTarget.dataset.url
//这个方法如果调用，会导致tab bar闪动一下，这个是个bug
/* this.setData({
selected: index
}) */
// wx.switchTab({ url })
wx.reLaunch({
url
})
}
}
})
json：
{
"component": true,
"usingComponents": {}
}
- 引用组件，在首页和我的页面引用tabbar组件：
‘首页’的json文件引入：
{
"usingComponents": {
"tabBar":"组件文件路径"
},
}
‘首页’的wxml文件引入，在最底部写入：
<tabBar selected="0"></tabBar>
‘我的’的json文件引入：
{
"usingComponents": {
"tabBar":"组件文件路径"
},
}
‘我的’的wxml文件引入，在最底部写入：
<tabBar selected="1"></tabBar>
三.结语：
886，接下来一路高产文章来源：https://www.toymoban.com/news/detail-718043.html
我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~文章来源地址https://www.toymoban.com/news/detail-718043.html
到了这里，关于微信小程序子页面自定义tabbar组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
