微信小程序子页面自定义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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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
      })
    }

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

json：

{
  "component": true,
  "usingComponents": {}
}
1
2
3
4

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

‘首页’的json文件引入：

{
  "usingComponents": {
    "tabBar":"组件文件路径"
  },
}
1
2
3
4
5

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

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

‘我的’的json文件引入：

{
  "usingComponents": {
    "tabBar":"组件文件路径"
  },
}
1
2
3
4
5

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

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

三.结语：

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