微信小程序实现的标签的标签效应的实例代码
近日，微信的应用数量正在如火如荼，热的和完整的，但它也可以发现，搜索关键词出来，和各种各样的网站出现在微信的官方文档的解释。正好赶上这股热潮，我们先看这几天的小程序，技术文件，直接手写的情况。许多组件已经被包装进WeChat，才发现没有tab选项卡效果，和这两天正在研究。以下思路如下：1。首先，当您单击导航时，需要两个变量，一个存储当前的单击样式类，另一个是导航的默认样式。
2，选项卡列表还需要两个变量，一个存储当前显示块，另一个变量是其他隐藏的默认块。
3，使用三次操作，通过点击获取导航索引，并决定是否根据索引添加当前类。{此处}我将单击父导航栏中的事件绑定，并通过单击目标对象获取触发的事件对象属性。
请结合以下效果图：
接下来，直接看源代码：
Demo.wxml：
tab-hd01
tab-hd01
tab-hd01
tab-hd01
tab-bd01
Tab-bd02
tab-bd03
tab-bd04
Demo.js：
页（{
数据：{
TabArr：{
curhdindex：0，
curbdindex：0
}，
}，
TabFun：功能（e）{
获取数据集属性触发器事件组件
无功_datasetid = e.target.dataset.id；
console.log（，+ _datasetid +---）；
无功_obj = { }；
_obj curhdindex = _datasetid；
_obj curbdindex = _datasetid；
this.setdata（{
TabArr：_obj
}）；
}，
onLoad：功能（选项）{
警报（）；
}
}）；
Demo.wxss：
{。
显示：flex；
弯曲方向：行；
}
制表符左{
宽度：200rpx；
线高度：160%；
边境：solid 1px的灰色；
}
标签左视图{
底部边框：solid 1px的红色；
}
左键，活动{
颜色：# F00；
}
右键{
线高度：160%；
}
右键，右项{
左：15rpx填充；
显示：无；
}
右键，右项，活动{
显示块；
}
最后演示的结果如下：
谢谢你的阅读。我希望你能帮助你，谢谢你对这个站的支持。