微信小程序Tabbar_tabbar-show-guide.uc.cn

微信小程序Tabbar

---

---

一、Tabbar是什么？

Tabbar是一种位于小程序底部的跳转导航栏，与微信底部导航栏类似

二、使用步骤

1.创建所需要的界面和所需要的图片

2.配置文件：

我们找到项目根目录中的配置文件 app.json 加入如下配置信息（示例）：

"tabBar": {
    "selectedColor": "#8C46AA",
    "color": "black",
    "borderStyle": "white",
    "list": [
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "icons/message.png",
      "selectedIconPath": "icons/message_.png"
    },
    {
      "pagePath": "pages/guide/guide",
      "text": "指南",
      "iconPath": "icons/guide.png",
      "selectedIconPath": "icons/guide_.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "个人",
      "iconPath": "icons/user.png",
      "selectedIconPath": "icons/user_.png"
    }
  ]
},
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

如此一来就算基本配置好了，效果如下：

3.属性的解释

   color  未选择时 底部导航文字的颜色

   selectedColor  选择时 底部导航文字的颜色

   borderStyle  底部导航边框的样色（只能白色和黑色）

   list   导航配置数组

   selectedIconPath 选中时 图标路径

   iconPath 未选择时 图标路径

   pagePath 选中时页面访问地址

   text  导航图标下方文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

三、Tabbar的API扩展功能

提示：这里可以显示右上角红点文字，隐藏Tabbar等

1.配置按钮（只是方便示例）：

在一个页面wxml中写入按钮

<button bindtap="btnClick1" type="primary">显示 tabBar 的页面1的右上角的红点</button>
<button bindtap="btnClick2" type="primary">隐藏 tabBar 的页面1的右上角的红点</button>

<button bindtap="btnClick3" type="primary">为 tabBar  右上角添加文本</button>
<button bindtap="btnClick4" type="primary">移除 tabBar  右上角的文本</button>

<button bindtap="btnClick5" type="primary">隐藏 tabBar</button>
<button bindtap="btnClick6" type="primary">显示 tabBar</button>

<button bindtap="btnClick7" type="primary">动态改变 tabBar 内容</button>
<button bindtap="btnClick8" type="primary">动态改变 tabBar 图标文字颜色</button>
1
2
3
4
5
6
7
8
9
10
11

---

2.js函数配置

Page({
  data: {
  },
  btnClick1: function (options) {
    wx.showTabBarRedDot({
      index: 0,
    })
  },
  btnClick2: function (options) {
    wx.hideTabBarRedDot({
      index: 0,
    })
  },
  btnClick3: function (options) {
    wx.setTabBarBadge({
      index: 0,
      text: '1'
    })
  },
  btnClick4: function (options) {
    wx.removeTabBarBadge({
      index: 0,
    })
  },
  btnClick5: function (options) {
    wx.hideTabBar({
      animation: true //是否需要动画效果
    })
  },
  btnClick6: function (options) {
    wx.showTabBar({
      animation: true
    })
  },
  btnClick7: function (options) {
    wx.setTabBarItem({
      index: 0,
      text: '改变',
      iconPath: 'icons/clock.png',
      selectedIconPath: 'icons/clock.png'
    })
  },
  btnClick8: function (options) {
    wx.setTabBarStyle({
      color: '#66ccff',
      selectedColor: '#00FF00',
      backgroundColor: '#f2f2f2',
      borderStyle: 'white'
    })
  }
})
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

效果如下：

---

更多配置参数可参考：

微信小程序官方文档