• 这两天开发一个微信小程序，需要让底部导航栏中间图标往上突出一点来。之前都是用组件或者直接原生没有太多定制样式，所以记录一下完成步骤。

1. 自定义tabbar栏配置

  • 在 app.json 文件中的 tabBar 中指定 custom 字段为 true（意思是允许使用自定义 tabBar）；
  • 在 app.json 中全局开启使用组件，或者在所有涉及的 tab 页 json 中申明usingComponents 项；
  • 在 app.json 中添加作为 tabBar 栏的页面；
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
"tabBar": {
  "custom": true,
  "color": "#cccccc",
  "selectedColor": "#eb585b",
  "borderStyle": "black",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/index/index",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png",
      "text": "首页"
    },
    {
      "pagePath": "pages/follow/index",
      "iconPath": "images/zhizhen.png",
      "selectedIconPath": "images/zhizhen-active.png",
      "text": "关注"
    },
    {
      "pagePath": "pages/add-house/index",
      "iconPath": "images/plus.png",
      "selectedIconPath": "images/plus.png",
      "bulge": true,
      "text": ""
    },
    {
      "pagePath": "pages/message/index",
      "iconPath": "images/xiaoxi.png",
      "selectedIconPath": "images/xiaoxi-active.png",
      "text": "消息"
    },
    {
      "pagePath": "pages/home/index",
      "iconPath": "images/my.png",
      "selectedIconPath": "images/my-active.png",
      "text": "我的"
    }
  ]
}

pagePath 是自己添加的页面，text 是tabBar上展示的文字。

2. 添加自定义tabbar组件栏

在根目录下创建 custom-tab-bar 文件夹，并在该文件夹下新建 Component，或者新建 Page，但是这种创建方式需要自己改动一些代码，在这里我们选用新建 Component 的方式。

2.1 添加组件代码

2.1.1 完善 wxml 文件代码，tabBar 栏需要展示的页面是一个固定的数组，可以使用 wx:for 循环展示，在这里用到 selected 这个字段，这个字段的作用是帮助展示 tabBar 选中和未选中的样式。

1
2
3
4
5
6
7
8
9
10
<!-- custom-tab-bar/index.wxml -->
<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <view wx:if="{{item.bulge}}" class="tab-bar-bulge"></view>
    <image class="image" src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></image>
    <view class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">
      {{item.text}}
    </view>
  </view>
</view>

2.1.2 完善 js 文件代码，list 数组就是在 tabBar 栏展示的页面信息，switchTab 方法作用可以出看来是负责跳转页面。其它的字段相信各位都知道，这里就不再描述。

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
// custom-tab-bar/index.js
Component({
  data: {
    selected: 0,
    color: "#ccc",
    selectedColor: "#eb585b",
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "/images/home.png",
      selectedIconPath: "/images/home-active.png",
      text: "首页"
    }, {
      pagePath: "/pages/follow/index",
      iconPath: "/images/zhizhen.png",
      selectedIconPath: "/images/zhizhen-active.png",
      text: "关注"
    }, {
      pagePath: "pages/add-house/index",
      iconPath: "/images/plus.png",
      selectedIconPath: "/images/plus.png",
      // text: "",
      bulge: true,
    }, {
      pagePath: "/pages/message/index",
      iconPath: "/images/xiaoxi.png",
      selectedIconPath: "/images/xiaoxi-active.png",
      text: "消息"
    }, {
      pagePath: "/pages/home/index",
      iconPath: "/images/my.png",
      selectedIconPath: "/images/my-active.png",
      text: "我的"
    }]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      // this.setData({
      //   selected: data.index
      // })
    }
  }
})

2.1.3 完善wxss文件代码

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
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: #FFF;
  display: flex;
  line-height: 1.2;
  padding-bottom: env(safe-area-inset-bottom);
  -moz-box-shadow:0px -1px 8px #eee; 
  -webkit-box-shadow:0px -1px 8px #eee; 
  box-shadow:0px -1px 8px #eee;
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item .image {
  width: 26px;
  height: 26px;
}
.bulge {
  background-color: #FFF;
}
.bulge .tab-bar-bulge{
  position: absolute;
  z-index: -1;
  width: 64px;
  height: 64px;
  top: -20px;
  border-radius: 50%;
  background-color: #FFF;
  -moz-box-shadow:0px -1px 8px #eee; 
  -webkit-box-shadow:0px -1px 8px #eee; 
  box-shadow:0px -1px 8px #eee;
}
.bulge .image{
  width: 50px;
  height: 50px;
  transform: translate(1rpx,-25rpx);

}
.bulge .tab-bar-view{
  position: relative;
  bottom: -16px;
  margin-top: 4px;
}

.tab-bar-item .tab-bar-view {
  font-size: 12px;
  margin-top: 4px;
}

2.2 修复bug

这样就大致完成了一个自定义tabbar栏，当时它目前还是有点问题的。在每一个tabbar标签的页面的js中添加以下代码，另外还有一个问题就是会出现初次进入小程序点击底部tabbar-item跳转时会闪烁。这是微信那边的问题，网上有方法解决，这个奇怪的问题留给下次在修复吧。

1
2
3
4
5
6
7
8
9
// pages/follow/index.js
onShow() {
  if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 1
    })
  }
},