taro tabBar的设置，设置tabbar的文字，设置tabbar的图标

效果展示

需求

为项目设置tabbar，并处理文字，以及放置本地图标的选中效果

版本

    "@tarojs/cli": "3.2.14",
1

解决方案

1.文字很好设置，设置text即可
2.项目src下放入img文件夹和所需图片，如下图

// src/app.config.js

	tabBar: {
    list: [{
      pagePath: 'pages/index/index',
      text: '首页',
      iconPath:"pages/imgs/tabnav/icon1.png", // 激活前的图片
      selectedIconPath:"pages/imgs/tabnav/icon1-act.png", // 激活后的图片
    }, {
      pagePath: 'pages/goods/goods',
      text: '商品',
      iconPath:"pages/imgs/tabnav/icon2.png",
      selectedIconPath:"pages/imgs/tabnav/icon2-act.png",
      
    }],
    'color': '#000',
    'selectedColor': '#56abe4',
    'backgroundColor': '#fff',
    'borderStyle': 'white'
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

详细代码

src/app.config.js

export default {
  pages: [
    'pages/home/home',
    'pages/index/index',
    'pages/goods/goods',
    'pages/user/user',
    'pages/order/order'
  ],
  tabBar: {
    list: [{
      pagePath: 'pages/index/index',
      text: '首页',
      iconPath:"pages/imgs/tabnav/icon1.png",
      selectedIconPath:"pages/imgs/tabnav/icon1-act.png",
    }, {
      pagePath: 'pages/goods/goods',
      text: '商品',
      iconPath:"pages/imgs/tabnav/icon2.png",
      selectedIconPath:"pages/imgs/tabnav/icon2-act.png",
      
    }, {
      pagePath: 'pages/user/user',
      text: '我的',
      iconPath:"pages/imgs/tabnav/icon3.png",
      selectedIconPath:"pages/imgs/tabnav/icon3-act.png",
    }],
    'color': '#000',
    'selectedColor': '#56abe4',
    'backgroundColor': '#fff',
    'borderStyle': 'white'
  },
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

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