微信小程序子页面自定义tabbar组件

自定义tabbar组件"/>

微信小程序子页面自定义tabbar组件

一.先言：

有时候微信小程序会遇到代码合并，就比如把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": {}
}

2. 引用组件，在首页和我的页面引用tabbar组件：

‘首页’的json文件引入：

{"usingComponents": {"tabBar":"组件文件路径"},
}

‘首页’的wxml文件引入，在最底部写入：

<tabBar selected="0"></tabBar>

‘我的’的json文件引入：

{"usingComponents": {"tabBar":"组件文件路径"},
}

‘我的’的wxml文件引入，在最底部写入：

<tabBar selected="1"></tabBar>

三.结语：

886，接下来一路高产

我的哔哩哔哩空间
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总结笔记
…等等
进我主页看更多~