介绍 & lt; blockquote> & lt; view 类=皌ab"在
这篇文章主要介绍了微信小程序开发实现标签选项卡效果的案例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类
选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块
使用三目运算通过点击获取导航索引,根据索引判断是否添加当前类【备注,这里我将点击事件绑定在父级导航栏,通过对目标象得到点击触发的事件对象属性】
请结合如下效果图:
演示。wxml:
演示。js
.tab {,,
,,,显示:,flex,,,
,,,flex-direction:,行,,,
},,
.tab-left {,,
,,,宽度:,200 rpx;,,
,,,行高:,160%;,,
,,,边境:,solid 1 px 灰色的,,,
},,
.tab-left 视图{,,
,,,边界底部:,solid 1 px 红,,,
},,
.tab-left .active {,,
,,,颜色:,# f00;,,
},,
.tab-right {,,
,,,行高:,160%;,,
},,
.tab-right .right-item {,,
,,,padding-left:, 15 rpx;,,
,,,显示:,没有,,,
},,
.tab-right .right-item.active {,,
,,,显示:,块,,,
} 最终演示效果如下:
总结:Kagami_Tiger的原理是选取选项卡,就调用选取标签的内容并隐藏其他选项卡内容,当然如果可以是把每个标签分类分别处于不同的页面,然后每一个选项卡一对应每个不同的页面,那样或许会更好。我没有那么开发过,也欢迎大家分享,相互学习举一反三,才能一起进步。
感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序开发实现标签选项卡效果的案例”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
