微信小程序tabbar使用,微信小程序tabbar切换监听
【微信小程序开发】自定义tabBar案例(自定义消息99小心脏)_技术博客of _wx62affbc457373 _博客
博客明星评选
个人主页：@电脑魔术师作者简介：CSDN内容合伙人，全栈领域优质创作者。
推荐一个求职神器网站：点击跳转到Niuke.com 笔试题库面试经验实习招聘推送
如果您没有帐户，请单击链接登录并注册！
本文包含JD.COM商城2022专栏微信小程序。
@[目录]
一、前提总结效果：实现一个自定义的tabBar，让消息tabBar显示消息的数量，通过全局共享来控制消息的数量。
所需知识点如下：
x辅助库(全局共享，见文章)vant组件库(见文章)组件的行为(见文章)自定义组件风格隔离组件数据监听器自定义组件主要分为三个步骤(很多例子几乎和流程一样)
配置信息(几乎所有要实现的东西都需要这一步)创建一个定制组件代码文件。关于编写代码的详细步骤，请参考官方文档。注意：配置自定义tabBar时，app.json中的节点列表不能删除，因为还是需要指定tabBar页面，这是tabBar的必要配置，但是这些字段不会影响自定义渲染。(如果较低版本不生效，默认情况下读取该字段进行渲染)
官方文件是这么说的。
和默认的tabBar一样，在app.json中，只需要在tabBar节点中设置它(custom=true设置为custom)，然后需要添加一个代码文件，
代码文件
自定义选项卡栏/index.js
自定义选项卡栏/index.json
自定义选项卡栏/索引. wxss
自定义选项卡栏/索引. wxml
我们在根目录下创建custom-tab-bar文件，点击生成组件(将其定制为组件，与页面导航定制原理相同)
效果如图所示：
此时，系统会自动识别该文件。
接下来，使用vant-weapp的组件库。如果你对vant-weapp组件一无所知，
我们介绍vant的tabBar标签组件
Vant-weapp官方文档介绍tabBar标签。
复制代码并将其放在index.json文件(本地引入)的components节点中
使用组件:{
van-tabbar : @ vant/weapp/tabbar/index ，
van-tabbar-item : @ vant/weapp/tabbar-item/index
}
根据官方文档，配置js文件的数据和方法，基本可以使用。
效果：
接下来，让我们自定义图标，参见官方文档：
记住slot的用法，
狭槽
将图片直接放在对应的tabbar-item项中，通过slot slot指定图片是选中还是未选中。事实上，vant中Tabbar组件的源代码接受两个槽的图片，如下所示：
插槽名称=icon /slot
插槽名称=icon-active /slot
源代码van-tabbar active= { { active } } bind:change= onchange
van-tabbar-项目信息=3
图像
slot=icon
src={{ icon.normal }}
mode=aspectFit
/
图像
slot=icon-active
src={{ icon.active }}
mode=aspectFit
/
定制
/van-tabbar-item
van-tabbar-item icon= search tag/van-tabbar-item
van-tabbar-item icon= setting-o label/van-tabbar-item
/van-tabbar页面({
数据：{
活动：0，
图标：{
正常： 3359 img . yzcdn . cn/vant/user-inactive . png ，
active: 3359 img . yzcdn . cn/vant/user-active . png ，
},
},
onChange(事件){
this . setdata({ active:event . detail })；
},
});
我们可以将图标放在图像标签的属性src中。
在：图标库素材里找不到好的图标素材。
效果：
Info是被修改组件的参数，可以动态设置，不需要删除。
接下来我们循环生成图标，将我们第一个实例中配置的tabbar的列表节点复制到index.js的数据中，组件通过wx:for循环列表数组，生成相应的图标，
效果：
图片的风格可以自己定义，风格设置info的值可以显示在图标上，但是我们发现改变图标会超出范围，如下图所示。
原因很简单，因为vant组件风格下有一个margin-bottom。我们可以通过设置vant组件的css全局变量来设置。
在通过外部样式修改组件的内部样式(样式隔离)之前，我们需要设置样式隔离。
“style isolation”:“shared”
在父组件配置中，修改配置。
index.js中
组件({
选项:{
styleIsolation :共享
}二。动态显示信息消息
如果没有定义信息，则为假，不显示；如果是0，也是假的，不显示，符合我们的开发要求。
使用mobx全局共享思想：mobx绑定全局控制信息
Mobx官方文档
在index.js中进行如下配置
//自定义选项卡栏/index.js
从“mobx-mini program-bindings”//Introduction导入{storebindingbehavior}以创建绑定实例
从导入{store}./store/store //进入仓库存储
组件({
行为：[storebindingbehavior]，
storebindingbehavior:[{
店，
字段：{
总和：“总和”
},
动作：{
}将sum的值绑定到info
一开始不知道如何同步sum和info的值，甚至想用组件通信的知识来解决(大家都知道组件通信比较麻烦)，却忘了组件还有一个非常特殊的方法：数据监听器。
代码解释：
在过去，不需要给赋值对象加上双引号。
""
是的，
但是列表需要被索引到列表[1]，因为模板语法需要双引号的形式。
列表[1]。 info : a
效果如下
第三，通过改变组件自带的事件绑定函数onChange来解决页面切换的效果(通过其活动的改变，使用程序化导航(文章介绍和更新)索引列表的url路径来切换页面。
代码部分
方法：{
onChange(事件){
event.detail的值是当前选定项的索引。
this.setData({
活动：事件.详细信息
});
wx.switchTab({
URL:string(this . data . list[event . detail])。pagepath)，//string转换为字符串或用“”隐式转换，-0隐式转换为整数。
})
}，但设置后会出现以下情况：页面正常跳转，但图标有bug。其中，active控制组件中跳转到哪个页面，0跳转到第一个，1跳转到第二个。在调试中，我发现active的值没有问题，所以在道理上应该没有bug。所以我觉得应该是页面跳转的时候，组件里的active会发生变化，而js文件的active就可以了。
解决方法：
全球共享商店中的商店活动
添加字段和方法
修改index.js文件中的onChnage函数
方法：{
onChange(事件){
event.detail的值是当前选定项的索引。
this . update active(event . detail)
wx.switchTab({
URL:string(this . data . list[event . detail])。pagepath)，//string转换为string或者用 隐式转换，-0隐式转换为int。
})
}，效果：
取得成功
修改标签色值的官方文件找API
效果图：
四。配置总结其实我们都需要配置tabBar。无论是否自定义，都需要在app.json的tarBar节点中进行配置我们可以自定义配置文件，在tarBar节点中配置完整的属性，微调观看效果。然后我们创建一个自定义文件并编写代码。然后把我们刚刚配置的列表节点放到custom-tab-bar的index.js的数据中，通过循环遍历改变index.wxml中的列表数据，达到效果。这个过程有几个优点。
在一些特殊情况下，比如版本不兼容，基本上还是可以显示效果的。不需要同时配置两个地方。在app.json节点配置从list复制到index.js的数据，可以通过页面循环实现，循环的数据可以很好的满足数据需求，比如这里的图片链接和文字。如果有任何问题，
欢迎私人博主提问。博主们会尽力解答你的疑惑！
如果对你有帮助，你的赞就是对博主最大的支持！
电脑魔术师原创作品，
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。