深圳幻海软件技术有限公司 欢迎您！
更多

微信小程序--》tabBar底部栏

2023-03-01

item home png
🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生🛵个人主页：亦世凡华、🛺系列专栏：微信小程序🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。👀引言      ⚓经过web前端开发的学习，相信大家对于前

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：微信小程序

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

       ⚓经过web前端开发的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。

目录

🍇什么是tabBar

🍈tabBar的6个组成部分

🍉tabBar配置项

tab项的配置选项

🍊自定义tabBar

配置信息

添加tabBar代码文件

编写tabBar代码

自定义tabBar图标

渲染tabBar的数字徽标

tabBar页面切换及其样式设置

🍇什么是tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分成两类，分别是：底部 tabBar 和 顶部 tabBar 简言之：就是位于小程序底部或顶部的调整导航栏，与微信底部导航栏类似。

注意：

tabBar中只能配置最少2个、最多5个tab页签

当渲染顶部的tabBar时，不显示icon，只显示文本

🍈tabBar的6个组成部分

①backgroundColor：tabBar的背景色

②selectedIconPath：选中时的图片路径

③borderStyle：tabBar上边框的颜色

④iconPath：未选中时的图片路径

⑤selectedColor：tab上的文字选中时的颜色

⑥color：tab上文字的默认（未选中）颜色

🍉tabBar配置项

属性类型必填项默认值描述
positionString否bottomtabBar的位置，仅支持bottom/top
borderStyleString否blacktabBar上边框颜色，仅支持black/white
colorHexColor否无tab上文字的默认（未选中）颜色
selectedColorHexColor否无tab上文字的选中颜色
backgroundColorHexColor否无tabBar的背景色
listArray是无tab页签的列表(最少2个，最多5个)

tab项的配置选项

在list数组里面填写的tab页签，每个tab页签可以配置如下配置选项：

属性类型必填描述
pagePathString是页面路径，页面必须在pages中预先定义
textString是tab上显示的文字
iconPathString否未选中时的图标路径；当position为top时，不显示icon
selectedIconPathString否选中时的图标路径；当position为top时，不显示icon
  1. {
  2.   "pages":[
  3.     "pages/home/home",
  4.     "pages/message/message",
  5.     "pages/contact/contact",
  6.     "pages/person/person",
  7.     "pages/index/index",
  8.     "pages/logs/logs"
  9.     
  10.   ],
  11.   "window":{
  12.     "backgroundTextStyle":"dark",
  13.     "navigationBarBackgroundColor": "#008c8c",
  14.     "navigationBarTitleText": "我的微信小程序",
  15.     "navigationBarTextStyle":"white",
  16.     "enablePullDownRefresh": true,
  17.     "backgroundColor": "#0f0",
  18.     "onReachBottomDistance": 50
  19.   },
  20.   "tabBar": {
  21.     "list": [{
  22.       "pagePath": "pages/home/home",
  23.       "text": "首页",
  24.       "iconPath": "./images/home.png",
  25.       "selectedIconPath": "./images/home-active.png"
  26.     },
  27.     {
  28.       "pagePath": "pages/message/message",
  29.       "text": "消息",
  30.       "iconPath": "./images/message.png",
  31.       "selectedIconPath": "./images/message-active.png"
  32.     },
  33.     {
  34.       "pagePath": "pages/contact/contact",
  35.       "text": "联系我们",
  36.       "iconPath": "./images/contact.png",
  37.       "selectedIconPath": "./images/contact-active.png"
  38.     }]
  39.   },
  40.   "style": "v2",
  41.   "sitemapLocation": "sitemap.json"
  42. }

🍊自定义tabBar

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。详细了解的话请参考官方文档说明：自定义tabBar

配置信息

官方文档明确说明：

为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染，所有下图的list是不用删除的。

添加tabBar代码文件

注意：添加的文件夹名字必须要和官方文件名字一样，不能乱修改名字；然后右键文件夹选择新建Component输入index 即可。

只要我们在app.json中声明了custom:true同时又创建了对应的custom-tab-bar对应的文件结构，微信小程序会自动识别custom-tab-bar对应的组件，把它的结构渲染到页面上，当作我们的tabBar

编写tabBar代码

我们自定义 tabBar 可以通过 Vant 组件库 里面的 tabBar 标签栏样式来快速便捷的创建我们的tabBar代码，如何配置 Vant 组件库的具体过程就不在演示了，详情请看一下如下这篇文章：

Vant组件库的安装及使用

自定义tabBar图标

Vant组件库也为我们提供了具体的方法：可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

  1. <van-tabbar-item info="3">
  2.   <image slot="icon" src="/images/home.png" mode="aspectFit" style="width: 30px; height: 18px;"/>
  3.   <image slot="icon-active" src="/images/home-active.png" mode="aspectFit" style="width: 30px; height: 18px;"/>
  4.   首页
  5. </van-tabbar-item>

虽然我们可以自定义图标，但是上面的自定义一个图标就要写好多代码，能不能有种方法可以简便的自定义我们的图标，可以的。我们可以通过循环的形式将我们的tabbar-item给我们渲染出来。

首先我们需要将 list 里面的文件复制到自定义组件文件夹下 .js文件下的data里面：

  1. // .wxml
  2. <van-tabbar active="{{ active }}" bind:change="onChange">
  3.   <van-tabbar-item wx:for="{{list}}" wx:key="index">
  4.     <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
  5.     <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
  6.     {{item.text}}
  7.   </van-tabbar-item>>
  8. </van-tabbar>

渲染tabBar的数字徽标

我们可以通过设置 info 属性来渲染tabBar上的数字徽标，如下图代码图片所示：

  1. <!--custom-tab-bar/index.wxml-->
  2. <van-tabbar active="{{ active }}" bind:change="onChange">
  3.   <van-tabbar-item wx:for="{{list}}" wx:key="index" info="2">
  4.     <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
  5.     <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
  6.     {{item.text}}
  7.   </van-tabbar-item>>
  8. </van-tabbar>

这样做的结果虽然能达到数字徽标效果的出现，但显然是把它写死了，所以我们要进行动态的绑定，这里我们可以参考一下微信官方文档的介绍。

  1. // custom-tab-bar/index.wxml
  2. <van-tabbar active="{{ active }}" bind:change="onChange">
  3.   <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
  4.     <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
  5.     <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
  6.     {{item.text}}
  7.   </van-tabbar-item>>
  8. </van-tabbar>
  9.  
  10. // custom-tab-bar/index.js
  11. import {storeBindingsBehavior} from '../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
  12. import {store} from '../store/store'
  13. Component({
  14.   behaviors:[storeBindingsBehavior],
  15.   storeBindings: {
  16.     store,
  17.     fields: {
  18.       sum: "sum",
  19.     },
  20.     actions: {
  21.     },
  22.   },
  23.   observers:{
  24.     'sum':function(val){
  25.       // console.log(val);
  26.       this.setData({
  27.        'list[1].info':val>0?val:0 //三元运算符，如果数字徽标的数值小于零，就赋值为0
  28.       })
  29.     }
  30.   },
  31.   /**
  32.    * 组件的属性列表
  33.    */
  34.   properties: {
  35.  
  36.   },
  37.  
  38.   /**
  39.    * 组件的初始数据
  40.    */
  41.   data: {
  42.     active:0,
  43.     "list": [{
  44.       "pagePath": "pages/home/home",
  45.       "text": "首页",
  46.       "iconPath": "/images/home.png",
  47.       "selectedIconPath": "/images/home-active.png"
  48.     },
  49.     {
  50.       "pagePath": "pages/message/message",
  51.       "text": "消息",
  52.       "iconPath": "/images/message.png",
  53.       "selectedIconPath": "/images/message-active.png",
  54.       info:2
  55.     },
  56.     {
  57.       "pagePath": "pages/contact/contact",
  58.       "text": "联系我们",
  59.       "iconPath": "/images/contact.png",
  60.       "selectedIconPath": "/images/contact-active.png"
  61.     }]
  62.   },
  63.  
  64.   /**
  65.    * 组件的方法列表
  66.    */
  67.   methods: {
  68.     onChange(event) {
  69.       // event.detail 的值为当前选中项的索引
  70.       this.setData({ active: event.detail });
  71.     },
  72.   }
  73. })

tabBar页面切换及其样式设置

我们将active引入到store实例对象当中，来动态的获取页面的索引值；在我们进行自定义tabBar的时候切换页面可能会出现闪烁问题，可自行百度，这里仅以举例为主。

  1. //.wxml
  2. <van-tabbar active="{{active}}" bind:change="onChange">
  3.   <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info?item.info:''}}">
  4.     <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;"/>
  5.     <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
  6.     {{item.text}}
  7.   </van-tabbar-item>>
  8. </van-tabbar>
  9.  
  10. //.js
  11. // custom-tab-bar/index.js
  12. import {storeBindingsBehavior} from '../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'
  13. import {store} from '../store/store'
  14. Component({
  15.   behaviors:[storeBindingsBehavior],
  16.   storeBindings: {
  17.     store,
  18.     fields: {
  19.       sum: "sum",
  20.       active:'activeTabBarIndex',
  21.     },
  22.     actions: {
  23.       updateActive:'updateActiveTabBarIndex'
  24.     },
  25.   },
  26.   observers:{
  27.     'sum':function(val){
  28.       // console.log(val);
  29.       this.setData({
  30.        'list[1].info':val>0?val:0 //三元运算符，如果数字徽标的数值小于零，就赋值为0
  31.       })
  32.     }
  33.   },
  34.   /**
  35.    * 组件的属性列表
  36.    */
  37.   properties: {
  38.  
  39.   },
  40.  
  41.   /**
  42.    * 组件的初始数据
  43.    */
  44.   data: {
  45.     "list": [{
  46.       "pagePath": "/pages/home/home",
  47.       "text": "首页",
  48.       "iconPath": "/images/home.png",
  49.       "selectedIconPath": "/images/home-active.png"
  50.     },
  51.     {
  52.       "pagePath": "/pages/message/message",
  53.       "text": "消息",
  54.       "iconPath": "/images/message.png",
  55.       "selectedIconPath": "/images/message-active.png",
  56.       info:2
  57.     },
  58.     {
  59.       "pagePath": "/pages/contact/contact",
  60.       "text": "联系我们",
  61.       "iconPath": "/images/contact.png",
  62.       "selectedIconPath": "/images/contact-active.png"
  63.     }]
  64.   },
  65.  
  66.   /**
  67.    * 组件的方法列表
  68.    */
  69.   methods: {
  70.     onChange(event) {
  71.       // event.detail 的值为当前选中项的索引
  72.       // this.setData({ active: event.detail })
  73.       this.updateActive(event.detail)
  74.       wx.switchTab({
  75.         url: this.data.list[event.detail].pagePath,
  76.       })
  77.  
  78.     },
  79.   }
  80. })
  81.  
  82. //store.js
  83. // 在这个 JS 文件中，专门来创建 Store 的实例对象
  84. import {observable,action} from '../miniprogram/miniprogram_npm/mobx-miniprogram/index'
  85.  
  86. export const store = observable({
  87.   // 数据字段
  88.   numA:1,
  89.   numB:2,
  90.   activeTabBarIndex:0,
  91.   // 计算属性
  92.   get sum(){
  93.     return this.numA + this.numB
  94.   },
  95.   // actions 函数，专门来修改 store 中数据的值
  96.   updateNum1:action(function(step){
  97.     this.numA += step
  98.   }),
  99.   updateNum2:action(function(step){
  100.     this.numB += step
  101.   }),
  102.   updateActiveTabBarIndex:action(function(index){
  103.     this.activeTabBarIndex = index
  104.   })
  105. })

当然我们也可以设置tabBar选中项的文本颜色：

其他具体的tabBar样式设置可自行参考 Vant组件库，tabBar底部栏的讲解今天就到这了。

文章已被收录至官方知识档案
小程序技能树page.json配置tabBar底部栏4734 人正在系统学习中
学习分享/商务合作/技术交流
微信名片
Flutter Android 打包保姆式全流程 2023 版
数字人民币来了！是“鸡肋”还是颠覆性创新？全国人大代表这样解读