微信小程序使用vant 和 mobx 自动定义Tabbar

vant 和 mobx 自动定义Tabbar

在此案例中，用到的主要知识点如下： 自定义组件 Vant 组件库 MobX 数据共享 组件样式隔离 组件数据监听器 组件的 behaviors Vant 样式覆盖

1.首先需要给我们的app.json 配置tabBar “custom”：true 注意点：（为了保证低版本兼容以及区分哪些页面是 tab 页。此时tabBar内配置需要保留）

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）

createStoreBind的参数解析：

createStoreBindings：创建时，绑定到 storeBindings 变量上，是为了页面卸载的时候做清理使用

 * 第一个参数： this:绑定到当前页面实例中，
 * 第二个参数(对象)：
 store:数据源(将store中的某些字段、方法绑定到当前页面中)fields：将哪些字段绑定到此页面中进行使用actions：将哪些方法绑定到此页面中* 清理：调用 destroyStoreBingds 方法 
destroyStoreBingds：清理createStoreBindings 

此时回到我们的自定义组件的index.js页面

1.导入mobx 第三方包，导入store
2.使用behavior挂载按需加载的第三方包的方法storeBindingsBehavior
3.进行数据的绑定。

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’ },

reBindings:中 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, }) },

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享