vant 和 mobx 自动定义Tabbar
在此案例中，用到的主要知识点如下： 自定义组件 Vant 组件库 MobX 数据共享 组件样式隔离 组件数据监听器 组件的 behaviors Vant 样式覆盖
1.首先需要给我们的app.json 配置tabBar "custom"：true
注意点：（为了保证低版本兼容以及区分哪些页面是 tab 页。此时tabBar内配置需要保留）
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
2..根据官方文档。根目录下建立custom-tab-bar 建立组件index自动生成 custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
此时，我们可以使用Vantweapp去做tabBar.需要使用 vant-tabbar和van-tabbar-item.需要在app.json中去注册这两个组件。
a.内置两个图片区通过vant组件slot显示我们图片高亮以及未选择时的颜色。
b.active动态控制高亮 (使用mobx)
c.bind:change="onChange" 动态切换tabBar index(使用mobx)
d.active-color="#FFB6C1" 高亮时文字的颜色
e.info动态显示消息数量。index结合message内容（使用mobx）
注册时需要注意路径可能不一致，改过来就好了。
此时我们在自定义组件中data内定义了list.此时我们自定义wxml中去遍历list出我们的tabBar.（此时info写死的。数字徽标）
此时出现了一个问题，我们的图标超出了tabBar的范围（橘黄色是margging）
于是我们需要去修改样式，组件去影响页面的样式需要设置样式。
自定义组件index.js中
options:{
styleIsolation:'shared'
},
此时在store.js内有我们设置好的数据。
全局状态管理mobx-miniprogram（类似store）
引入Mobx-miniprogram包内的observable 和action方法。
导出store实例
1.activeTabBarIndex:0,此项是我们对应切换tabBar页面的变量 默认首页
2.action方法 通过接收的参数来控制切换 组件中传参
updateActiveTabBarIndex:action(function(index){
this.activeTabBarIndex = index
})
这个是message中的页面的wxml结构。我们message的数字徽标通过sum去动态改变。通过触屏事件去改变sum从而改变徽标。
message的js页面。此处我们使用可mobx-miniprom-bindings
引入第三方包将数据绑定到页面上。
a.引入 mobx-miniprogram-bindings 中的 createStoreBindings 方法(参数如下)，并将其挂在到 storeBindings 变量上(页面卸载的时候做清理使用)。）
createStoreBind的参数解析：
createStoreBindings：创建时，绑定到 storeBindings 变量上，是为了页面卸载的时候做清理使用
* 第一个参数： this:绑定到当前页面实例中，
* 第二个参数(对象)：
store:数据源(将store中的某些字段、方法绑定到当前页面中)
fields：将哪些字段绑定到此页面中进行使用
actions：将哪些方法绑定到此页面中
* 清理：调用 destroyStoreBingds 方法
destroyStoreBingds：清理createStoreBindings
此时回到我们的自定义组件的index.js页面
- 导入mobx 第三方包，导入store
- 使用behavior挂载按需加载的第三方包的方法
storeBindingsBehavior - 进行数据的绑定。
a.此处先说我们的数字徽标。
a.1在wxml处我们使用了三元运算符。判断绑定的list中info是否存在
info="{{item.info? item.info : ''}}"
a.2 使用监听器observers(判断list中的第二个item 对应的值。赋值到对应的info上)
observers:{
'sum': function (val) {
// console.log(val);
this.setData({
'list[1].info':val
})
}
}
b. 自定义组件wxml 点击高亮时 vant组件的active属性active="{{active}}"
index.js storeBindings:中 fields: active:'activeTabBarIndex'
C.自定义组件wxml tabBar切换 bind:change="onChange"
获取store的action方法 storeBindings:中 actions: { updateActive:'updateActiveTabBarIndex' },
对应的切换tabBar的方法 onChange(event) { // event.detail 的值为当前选中项的索引 // this.setData({ active: event.detail }); this.updateActive(event.detail) wx.switchTab({ url: this.data.list[event.detail].pagePath, }) },
