对标签标签在WeChat程序执行的效果

该选项卡的标签在微信程序的影响

前言：uff1a

近日，微信的应用数量正在如火如荼，热的和完整的，但它也可以发现，搜索关键词出来，和各种各样的网站出现在微信的官方文档的解释。正好赶上这股热潮，我们先看这几天的小程序，技术文件，直接手写的情况。许多组件已经被包装进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填充；
显示：无；
}
右键，右项，活动{
显示块；
}


最后演示的结果如下：







谢谢你的阅读。我希望你能帮助你，谢谢你对这个站的支持。