微信小程序自定义标签 第1篇
通过改组件自带的 事件绑定函数 onChange解决 （通过其active的变化使用编程式导航（文章介绍更新中）索引list的url路径切换页面
代码部分
但是在设定好之后会出现如下情况，页面有正常跳转，但是图标却出了bug，其中active在组件中是控制跳转到哪一个页面的，为0跳转到一个，为1跳转到第二个 ，在调试中，我发现active的值没有毛病，按道理不应该出bug,所以笔者认为应该是页面跳转时候，组件中的active会变化，而js文件的active没问题
解决方法：将active 存贮到store 进行全局共享
添加字段和方法
在文件中 修改onChnage函数
效果：
实现成功
修改标签颜色值
效果图：
微信小程序自定义标签 第2篇
2.导航页边组件。
有一说一哈 我觉得自定义导航栏好麻烦 然后我最近又把他改掉了
先新建个新的页面四件套 wxml里面实现tabBar的展示 之上则是根据条件加载不同的组件 ，这些组件就是原先的导航页 改的（这个改的很省事）
嫌着蛋疼 没想出新功能的时候就想到些花里胡哨的玩意儿，换肤功能
刚刚开始都想哭了因为最早页面样式我想写的到处都是 整理死我了
大体这样：
1.将全部需要受到换肤影响的元素都找出来
2.在每个页面js的data中增加一个skin（名字你随意）作为 1中的className （一个皮肤不同位置有不同的的样式 那就多配几个）
3增加一个wxss文件 里面写好所有的皮肤样式 样式为类选择器 类名用用于skin赋值
中globalData也新增skin（用于每个页面skin默认值） ，并新增一个设置相应界面skin值的函数setSkin(that){}
5.提供一个选择皮肤的功能,选择对应的皮肤后 将所选的skinName 存入缓存（为了持续生效） 后调用的setSkin函数 setSkin函数通过获取缓存中的数据 为相应页面skin赋值
5.在每个页面的onshow中 调用的setSkin(that){}函数为skin赋值
微信小程序自定义标签 第3篇
知道怎么引用 Vant 组件之后，接下来就根据需求来对其进行修改，可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。来看一下 vant 提供的参数 TabbarItem Slot：
微信小程序自定义标签 第4篇
效果：实现一个自定义tabBar，使消息tabBar能够显示消息数量，并通过全局共享的方式，控制消息数量
需要的知识点如下：
自定义组件主要分为三个步骤（许多实例实现步骤差不多流程）
注意：在配置自定义tabBar时，中节点list不能删除，因为仍需要指定tabBar页面，这是tabBar的必要配置，但是这些字段不会影响自定义渲染。(如果低版本不生效，默认读取该字段渲染）
官方文档如是说
和默认tabBar一样，在 中仅需要在tabBar节点设置( custom = true 设置为自定义），然后需要添加代码文件，
代码文件
custom-tab-bar/
效果如图：
此时系统自动识别该文件
接下来使用vant-weapp的组件库，对vant-weapp组件不了解的，
我们引入vant的tabBar标签组件
复制代码，放入文件中的components节点中(局部引入）
按照官方文档，配置js文件的数据和方法，即可基本使用
效果：
接下来我们自定义图标，见官方文档：
还记得slot的用法吗，插槽
在对应的tabbar-item项中直接放入图片，通过插槽slot指定图片是选中状态还是未选中状态在vant的tabbar组件源代码其实是有对于两个插槽接受图片的，如下：
源代码
我们往image标签的属性src放置我们图标即可
没有好的图标素材见：图标库素材
效果：
其中info是对改组件的传参，可以动态设定，不需要删掉即可
接下来我们循环生成图标，将我们第一个实例配置tabbar的list节点复制到的data中，组件通过wx:for循环list数组，生成对应图标，
效果：
图片样式可以自己定义style
设置info的值可以在图标上显示 ，但是我们发现改图标会超出范围，如下图
原因很简单，是vant组件样式下有一个margin-bottom导致，我们可以通过设置vant组件的css全局变量设置
在通过外部样式修改组件的内部样式（样式隔离）之前，我们需要设定样式隔离
在父组件配置，修改配置
微信小程序自定义标签 第5篇
将 里的 list 数组放在自定义 tabBar 组件中的 data 数据，然后通过循环渲染到页面上。 注意：此处path必须加前面的/，否则在切换tabbar时，会自动拼接地址，导致传入url有误，系统没有任何效果
此时可以看到已经成功把 list 数组里的图片都渲染出来了，来看一下运行效果：
详细步骤，可以参考小程序官方给出的 文档 。
通过 van-tabbar-item 上 info 属性可以对 tabBar 渲染数字，具体代码如下所示：
微信小程序自定义标签 第6篇
其实我们都需要配置好tabBar的，不管是不是自定义都需要在的tarBar节点配置，我们可以自定义配置文件可以tarBar节点配置好完整属性，查看效果在细调，然后我们在创建自定义文件，编写代码，然后将我们刚刚配置的list节点放入 custom-tab-bar的的data中在通过循环遍历改list数据实现效果，这种流程有几个好处
微信小程序自定义标签 第7篇
如果未定义info则为假，不显示，如果为0也为假，也不显示符合我们的开发需求
使用mobx全局共享
思路：mobx绑定全局控制info
在如下配置
绑定sum的值到info
在一开始我是不知道如何同步sum和info的值，甚至想用 组件通信的知识解决（大家都知道组件通信很麻烦），但是忘了组件有一个非常的方法：数据监听器 (behavior)
a代码解释：在以往赋值时是不需要对赋值对象加上双引号“”的，但是 list需要索引到 list[1] 由于模板语法需要双引号的形式 'list[1].info' ： a
效果如下