不懂微信小程序怎么实现选项卡功能？其实想解决这个问题也不难，下面让小编带着大家一起学习怎么去解决，希望大家阅读完这篇文章后大所收获。

首先看看微信小程序上的选项卡的效果：

原理呢，就是先布局好（这就不必说了吧），然后在上面的每一个选项卡上都定义一个同样的点击事件，然后给每一个组件上绑定一个唯一的标识符，然后点击事件触发的时候，获取到绑定的标识符，判断当前点击的是哪个选项卡，然后再判断下面该显示哪一块，现在上代码：

wxml:

<view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"&#63;"borders":""}}' data-current="0" catchtap="menuTap">menu1</text> <text class='menu2 {{menuTapCurrent=="1"&#63;"borders":""}}' data-current="1" catchtap="menuTap">menu2</text></view><view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view><view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>

wxss:

.menu_box{ display: flex; height: 80rpx;}.menu1,.menu2{ flex: 1; font-size:30rpx; line-height: 80rpx; text-align: center;}.borders{ border-bottom: 4rpx solid #f00; color: #f00;}.tab1,.tab2{ height: 300rpx; background: #23bff3;}.tab2{ background: #ccc;}

JS:

menuTap:function(e){ var current=e.currentTarget.dataset.current;//获取到绑定的数据 //改变menuTapCurrent的值为当前选中的menu所绑定的数据 this.setData({ menuTapCurrent:current }); },

感谢你能够认真阅读完这篇文章，希望小编分享微信小程序怎么实现选项卡功能内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!