【微信小程序开发】自定义tabBar案例（定制消息99+小红心）_微信小程序 tabbar 底部导航栏显示消息通知的个数

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxss
custom-tab-bar/index.wxml

我们创建根目录下custom-tab-bar文件，点击生成component(将其作为组件自定义，这与页面导航自定义是一样原理的）

效果如图：
在这里插入图片描述
此时系统自动识别该文件

接下来使用vant-weapp的组件库，对vant-weapp组件不了解的，

我们引入vant的tabBar标签组件

vant-weapp官方文档引入tabBar标签
在这里插入图片描述
复制代码，放入index.json文件中的components节点中(局部引入）

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

按照官方文档，配置js文件的数据和方法，即可基本使用

效果：

接下来我们自定义图标，见官方文档：

还记得slot的用法吗，插槽

在对应的tabbar-item项中直接放入图片，通过插槽slot指定图片是选中状态还是未选中状态
在vant的tabbar组件源代码其实是有对于两个插槽接受图片的，如下：

<slot name="icon"></slot>
<slot name="icon-active"></slot>

源代码

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定义
  </van-tabbar-item>
  <van-tabbar-item icon="search">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

Page({
  data: {
    active: 0,
    icon: {
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
  },
  onChange(event) {
    this.setData({ active: event.detail });
  },
});

我们往image标签的属性src放置我们图标即可

没有好的图标素材见：图标库素材

效果：

其中info是对改组件的传参，可以动态设定，不需要删掉即可

接下来我们循环生成图标，将我们第一个实例配置tabbar的list节点复制到index.js的data中，组件通过wx:for循环list数组，生成对应图标，

效果：
图片样式可以自己定义style

设置info的值可以在图标上显示，但是我们发现改图标会超出范围，如下图

在这里插入图片描述

原因很简单，是vant组件样式下有一个margin-bottom导致，我们可以通过设置vant组件的css全局变量设置

在通过外部样式修改组件的内部样式（样式隔离）之前，我们需要设定样式隔离

“styleIsolation”: "shared"

在父组件配置，修改配置

在index.js中

Component({
	"options":{
	"styleIsolation": "shared"
	}

二、动态显示info消息

如果未定义info则为假，不显示，如果为0也为假，也不显示符合我们的开发需求
使用mobx全局共享

思路：mobx绑定全局控制info

mobx官方文档

在index.js如下配置

// custom-tab-bar/index.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' //引入创建绑定实例
import { store } from '../store/store' // 引入仓库store
Component({
	behaviors:[storeBindingsBehavior],
 storeBindingsBehavior:[{
		store,
 fields:{
		sum: 'sum'
		},
 actions:{
		}

绑定sum的值到info

在一开始我是不知道如何同步sum和info的值，甚至想用组件通信的知识解决（大家都知道组件通信很麻烦），
但是忘了组件有一个非常的方法：数据监听器 (behavior)

a
代码解释：
在以往赋值时是不需要对赋值对象加上双引号“”的，
但是 list需要索引到 list[1] 由于模板语法需要双引号的形式 'list[1].info' ： a

效果如下

三、页面切换效果

通过改组件自带的事件绑定函数 onChange解决（通过其active的变化使用编程式导航（文章介绍更新中）索引list的url路径切换页面
在这里插入图片描述

代码部分

methods: {
	onChange(event) {
		// event.detail 的值为当前选中项的索引 
 this.setData({
			active: event.detail
		});
		wx.switchTab({
			url: String(this.data.list[event.detail].pagePath), // String转换为字符串 或者加 "" 隐式转换， - 0 则隐式转换为整数
		})
	},

但是在设定好之后会出现如下情况，页面有正常跳转，但是图标却出了bug，其中active在组件中是控制跳转到哪一个页面的，为0跳转到一个，为1跳转到第二个，在调试中，我发现active的值没有毛病，按道理不应该出bug,所以笔者认为应该是页面跳转时候，组件中的active会变化，而js文件的active没问题

在这里插入图片描述

解决方法：
将active 存贮到store 进行全局共享

添加字段和方法 在这里插入图片描述

在index.js文件中修改onChnage函数

methods: {
	onChange(event) {
		// event.detail 的值为当前选中项的索引 
 this.updataActive(event.detail)
 wx.switchTab({
			url: String(this.data.list[event.detail].pagePath), // String转换为字符串 或者加 "" 隐式转换， - 0 则隐式转换为int
		})
	},