WeChat applet-realize the tab switching effect

The renderings are as follows:

Click on that tab title to display the corresponding content, and highlight the corresponding underline.

 

index.wxml 

<view class="tab">
	<view data-i="{
   
   {0}}" bindtap="setTabIndex" class="{
   
   {activeIndex===0?'active':''}}">标题1</view>
	<view data-i="{
   
   {1}}" bindtap="setTabIndex" class="{
   
   {activeIndex===1?'active':''}}">标题2</view>
	<view data-i="{
   
   {2}}" bindtap="setTabIndex" class="{
   
   {activeIndex===2?'active':''}}">标题3</view>
</view>

<view wx:if="{
   
   {activeIndex===0}}">
111111
</view>
<view wx:if="{
   
   {activeIndex===1}}">
222222</view>
<view wx:if="{
   
   {activeIndex===2}}">
3333333</view>

index.js

index.wxss

.tab{
  display: flex;
}
.tab view{
  flex: 1;
  text-align: center; 
  padding: 20rpx 0; 
}
.tab view.active{
  border-bottom: 4rpx solid #ff004c;
}