介绍 & lt; view 类=皌ab"祝辞,
,& lt; view 类=皌ab-left", bindtap=皌abFun"祝辞,
,& lt; view 类=皗{tabArr.curHdIndex==& # 39; 0 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,id=皌ab-hd01",数据id=?”;在tab-hd01,
,& lt; view 类=皗{tabArr.curHdIndex==& # 39; 1 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,id=皌ab-hd02",数据id=?“祝辞tab-hd01,
,& lt; view 类=皗{tabArr.curHdIndex==& # 39; 2 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,id=皌ab-hd03",数据id=?“祝辞tab-hd01,
,& lt; view 类=皗{tabArr.curHdIndex==& # 39; 3 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“,id=皌ab-hd04",数据id=?“祝辞tab-hd01,
& lt;/view>大敌;
,
,& lt; view 类=皌ab-right"祝辞,
,& lt; view 类=皉ight-item {{tabArr.curBdIndex==& # 39; 0 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“祝辞tab-bd01,
,& lt; view 类=皉ight-item {{tabArr.curBdIndex==& # 39; 1 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“祝辞tab-bd02,
,& lt; view 类=皉ight-item {{tabArr.curBdIndex==& # 39; 2 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“祝辞tab-bd03,
,& lt; view 类=皉ight-item {{tabArr.curBdIndex==& # 39; 3 & # 39; ?, & # 39;活跃# 39;,:,& # 39;& # 39;}}“祝辞tab-bd04,
& lt;/view>大敌;
& lt;/view> 页面(,{,
数据:,{大敌;
tabArr:,{大敌;
,curHdIndex: 0,,
,curBdIndex: 0,
},大敌;
},大敌;
,tabFun:函数(e) {,
,//获取触发事件组件的数据集属性,
,var _datasetId=e.target.dataset.id;
,console.log (“- - - - -“+ _datasetId +“- - - - -“),,
,var _obj={},
,_obj.curHdIndex=_datasetId;
,_obj.curBdIndex=_datasetId;
this.setData({大敌;
,tabArr: _obj
,});
},大敌;
,onLoad:函数(),options , {,
,警报(,“- - - - - -“,),,
}大敌;
}); .tab {,
,显示:flex,,
,flex-direction:行,,
},
.tab-left {,
,宽度:200 rpx;,
,行高:160%,,
,边境:solid 1 px 灰色,,
},
{.tab-left 视图,
,边界底部:solid 1 px 红色,,
},
.active {.tab-left
,颜色:# f00;,
},
.tab-right {,
,行高:160%,,
},
.right-item {.tab-right
,padding-left: 15 rpx,,
,显示:没有,,
},
.right-item.active {.tab-right
,显示:块,,
}
这篇文章给大家分享的是有关微信开发中如何使用js实现标签选项卡效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
思路如下:
1,首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类
2,选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块
3,使用三目运算通过点击获取导航索引,根据索引判断是否添加当前类【备注,这里我将点击事件绑定在父级导航栏,通过对目标象得到点击触发的事件对象属性】
请结合如下效果图:
接下来直接查看源码:
演示。wxml:
演示。js:
演示。wxs:
最终演示效果如下:
感谢各位的阅读!关于“微信开发中如何使用js实现标签选项卡效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
