介绍 & 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,
时间/view> & lt;
& 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,
时间/view> & lt;
& 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
,显示:块,,
}
这篇文章主要介绍小程序中如何开发制作标签选项卡,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>微信小程序标签选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了。很多组件微信内部已经封装完了,正好发现没有标签选项卡效果,这两天正好研究了下。思路如下:
1。首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类
2。选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块
3。使用三目运算通过点击获取导航索引,根据索引判断是否添加当前类【备注,这里我将点击事件绑定在父级导航栏,通过对目标象得到点击触发的事件对象属性】
请结合如下效果图:
接下来直接查看源码:
演示。wxml:
演示。js:
演示。wxs:
最终演示效果如下:
以上是“小程序中如何开发制作标签选项卡”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
