介绍 & lt; view 类=癰ody"比;
,& lt; view 类=皀av bc_white"比;
& lt;才能view 类=皗{选择? & # 39;红色# 39;:& # 39;默认# 39;}}“,bindtap=皊elected"祝辞系统提醒& lt;/view>
& lt;才能view 类=皗{selected1 ? & # 39;红色# 39;:& # 39;默认# 39;}}“,bindtap=皊elected1"在优惠活动& lt;/view>
,& lt;/view>
,& lt; view 类=皗{选择? & # 39;显示# 39;:& # 39;隐藏# 39;}}“祝辞for system
,& lt; view 类=皗{selected1 ? & # 39;显示# 39;:& # 39;隐藏# 39;}}“祝辞for activity
& lt;/view> 页面{background - color: # edf0f3;}
.nav{宽度:100%;高度:100 rpx;显示:flex; flex-direction:行;}
.default{行高:100 rpx; text-align:中心;flex: 1;边境:1 px solid gainsboro;颜色:# 000;粗细:大胆,字体大小:28 rpx;}
r{行高:100 rpx; text-align:中心;颜色:# fc5558; flex: 1;边境:1 px solid gainsboro;粗细:大胆,字体大小:28 rpx;}
,告诉{显示:块;text-align:中心;行高:200 rpx;}
.hidden{显示:没有;text-align:中心;行高:200 px;} 页面({
数据:{才能
,,,选择:没错,
,,,selected1:假的
,,,},
选择才能:函数(e) {
,,,this.setData ({
,,,,,selected1:假的,
,,,,,选择:没错
,,,})
,,},
selected1才能:函数(e) {
,,,this.setData ({
,,,,,选择:假的,
,,,,,selected1:没错
,,,})
,,}
})
这篇文章主要介绍微信小程序怎样实现选项卡切换效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
微信小程序之选项卡切换效果,如图:
最近在学习微信小程序并把之前的公司应用搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能)
。wxml代码:
。wxs代码:
。js代码:
以上是“微信小程序怎样实现选项卡切换效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
