最近微信申请号如火如荼，人气满满，但搜索关键词也能找到，各种网站都是微信官方文档讲解。正好赶上这个热潮，这几天把小程序的技术文档都看完了，然后开始直接写案例。微信内部已经打包了很多组件，刚发现没有tab效果，这两天正好在研究。想法如下：

1.首先，在点击导航时，需要两个变量，一个是存储当前点击样式类，另一个是其他导航的默认样式类

2.选项卡内容列表还需要两个变量，一个用于存储当前显示块，另一个用于存储其他隐藏的默认块

3.用三眼操作点击获取导航索引，根据索引判断是否添加当前类[备注，这里我把click事件绑定到父导航栏，通过目标对象点击获取触发的事件对象属性]

请结合以下效果图：

接下来，直接检查源代码：

demo.wxml:

view class=' tab ' view class=' tab-left ' bind tap=' tabbun ' view class=' { { tabarr . curhdindex==' 0 '？'active ' : ' ' } } ' id=' tab-hd01 ' data-id=' 0 ' tab-hd01/view view class=' { { tabarr . curhdindex==' 1 '？'active ' : ' ' } } ' id=' tab-hd02 ' data-id=' 1 ' tab-hd01/view view class=' { { tabarr . curhdindex==' 2 '？'active ' : ' ' } } ' id=' tab-hd03 ' data-id=' 2 ' tab-hd01/view view class=' { { tabarr . curhdindex==' 3 '？'active ' : ' ' } } ' id=' tab-hd04 ' data-id=' 3 ' tab-hd01/view/view class=' tab-right ' view class=' right-item { { tabarr . Curbdindex==' 0 '？'active ' : ' ' } } ' tab-bd01/view class=' right-item { { tabarr . Curbdindex==' 1 '？'active ' : ' ' } } ' tab-bd02/view class=' right-item { { tabarr . Curbdindex==' 2 '？'active ' : ' ' } } ' tab-bd03/view class=' right-item { { tabarr . Curbdindex==' 3 '？'active' : ''}} '选项卡-bd04/view /view /view demo.js:

page({ data : { tabarr : { curhdindex 33600，curbdindex :0 }，}，tabfun:函数(e){//获取触发事件组件的数据集属性var _ dataset id=e . target . dataset . id；console . log('-' _ DataSetid '-')；var _ obj={ }；_ obj.curHdIndex=_ datasetId_ obj.curBdIndex=_ datasetIdthis . setdata({ tabarr : _ obj })；}，onLoad:函数(选项){ alert('-')；} });demo.wxss:选项卡{ display: flexflex-direction : row；} .tab-左侧{ width: 200rpx线高：160%；border-right:实心1px灰色；} .制表符-左视图{边框-底部：实心1px红色；} .向左移动。活动{ color: # f00} .tab-右{ line-height : 160%；} .右标签。右项{ padding-left : 15 rpx；display:无；} .右标签。right-item . active { display : }块；}最终演示效果如下：

以上只是个人计划。如果有更好的方案，请提出来~

本文已整理成《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。

现在推荐一个关注度高的微信小程序教程：《微信小程序开发教程》边肖为大家精心安排的，希望大家喜欢。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。