uniapp 小程序自定义tabbar_uniapp custom-tab-bar

小程序自定义四件套（根目录下创建custom-tab-bar)

• index.js

  Component({
    data: {
      selected: 0,
      color: "#909090",
      selectedColor: "#4B2B23",
      list: [ {
        pagePath: '/pages/home/index',
        text: '首页',
        iconPath: '../static/tab-bar/icon_home_unselected.png',
        selectedIconPath: '../static/tab-bar/icon_home_selected.png',
      },
        {
          pagePath: '/pages/lucky-tree/index',
          text: '...',
          iconPath: '../static/tab-bar/icon_tree_unselected.png',
          selectedIconPath: '../static/tab-bar/icon_tree_selected.png',
        },
        {
          pagePath: '/pages/me/index',
          text: '我的',
          iconPath: '../static/tab-bar/icon_me_unselected.png',
          selectedIconPath: '../static/tab-bar/icon_me_selected.png',
        }]
    },
    attached() {
    },
    methods: {
      switchTab(e) {
        const data = e.currentTarget.dataset
        console.log(data)
        const url = data.path
        wx.switchTab({url})
        this.setData({
          selected: data.index
        })
      }
    }
  })
  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

• index.json

  {"component":true}
  1

• index.wxml（如果要做覆盖tabbar的东西，千万把cover-view, cover-image换成view, image,好像还能解决闪白问题)

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

• index.wxss

  .tab-bar {
    position: fixd;
    bottom: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background: white;
    display: flex;
    z-index: 999;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  
  .tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  
  .tab-bar-item image {
    width: 30px;
    height: 30px;
    margin-top: 10px;
  }
  
  .tab-bar-item view {
    margin-top: 6px;
    font-size: 12px;
    font-family: PingFang SC;
    text-align: center;
  }
  
  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

pages.json

"tabBar": {
		"custom": true,
		"list": [
			{
				"pagePath": "pages/home/index",
				"text": "首页",
				"iconPath": "/static/tab-bar/icon_home_unselected.png",
				"selectedIconPath": "/static/tab-bar/icon_home_selected.png"
			},{
				"pagePath": "pages/lucky-tree/index",
				"text": "...",
				"iconPath": "/static/tab-bar/icon_tree_unselected.png",
				"selectedIconPath": "/static/tab-bar/icon_tree_selected.png"
			},{
				"pagePath": "pages/me/index",
				"text": "我的",
				"iconPath": "/static/tab-bar/icon_me_unselected.png",
				"selectedIconPath": "/static/tab-bar/icon_me_selected.png"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Main.ts

Vue.prototype.setTabBarIndex = function (index:number){
    if (typeof  (this as any).$mp.page.getTabBar === 'function' &&
        (this as any).$mp.page.getTabBar()) {
        (this as any).$mp.page.getTabBar().setData({
            selected: index
        })
    }
}
1
2
3
4
5
6
7
8

各个页面加上

  onShow(){
    (this as any).setTabBarIndex(0)
}
1
2
3