微信小程序自定义tabbar_微信小程序 custom-tab-bar

app.json

"tabBar": {
    "custom": true, // 开启自定义
 }
1
2
3

项目根目录下新建自定义组件custom-tab-bar

• html

<view class="tab-bar" wx:if="{{showBar}}">
  <!-- <cover-view class="tab-bar-border"></cover-view> -->
  <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item {{item.diyClass}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected == index ? item.selectedIconPath : item.iconPath}}" class="{{item.diyClass}}"  mode="aspectFit"/> 
    <view wx:if="{{index != 1}}" style="color: {{selected === index ? selectedColor : color}}" class="{{item.diyClass}}">{{item.text}}</view>
  </view>
</view>
1
2
3
4
5
6
7

• js

// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
 
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    showBar:true,
    selected: 0,
    color: "#999999",
    selectedColor: "#0a9af1",
    listTab: [
      {
        pagePath: "/pages/index/index",
        text: "首页",
        iconPath: "/assets/tabbar/1.png",
        selectedIconPath: "/assets/tabbar/1-1.png"
      },
      {
        pagePath: "/pages/createOrder/index",
        text: "",
        iconPath: "/assets/tabbar/2.png",
        selectedIconPath: "/assets/tabbar/2-2.png",
        diyClass: "diy"
      },
      {
        pagePath: "/pages/my/index",
        text: "我的",
        iconPath: "/assets/tabbar/4.png",
        selectedIconPath: "/assets/tabbar/4-4.png"
      }
    ]
  },
  /**
   * 组件的方法列表
   */
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset;
      const url = data.path
      wx.switchTab({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
38
39
40
41
42
43
44
45
46
47
48
49
50

• css

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05);
  box-sizing: content-box;
}

.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: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  height: 120rpx;
}

.tab-bar-item.diy {
  margin-top: 0!important;
  position: relative;
  flex: inherit;
  width: 155rpx;
  background: #fff;
}

.tab-bar-item image {
  width: 48rpx;
  height: 48rpx;
  /* overflow: initial; */
}
.tab-bar-item view {
  font-size: 24rpx;
}

.tab-bar-item image.diy {
  position: absolute;
  width: 180rpx;
  height: 180rpx;
  bottom: 2%;
  z-index: 100;
}

.tab-bar-item view.diy {
  margin-top: 90rpx;
  background: rgb(180, 60, 60);
  width: 100%;
  height: 100%;
  padding-top: 58rpx;
  z-index: 99;
}

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
60
61
62
63
64
65

在所有tabbar页面，手动指定selected 按索引顺序——例如我的页面，首页不需要，下单不显示也不需要

onLoad(options) {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2 //0,1，2 0-首页 1-新建  2-我的
      })
    }
  },
1
2
3
4
5
6
7

下单页面不需要展示底部菜单；下单页面没有返回按钮，需要加一个手写一个返回按钮

 onLoad() {
    this.getTabBar().setData({
      showBar: false
    });
  },
1
2
3
4
5

比input 等原生组件层级更高的只有 cover-view cover-image