原生小程序实现tab切换效果

 

<view class="tab_bar_box">
    <view class="{{selectedTabIndex === index ? 'active' : 'common'}}" wx:for="{{tabs}}" wx:key="index" data-index="{{index}}" bindtap="handleTabClick">
      {{item}}
      <view class="{{selectedTabIndex === index ? 'tab__line': ''}}"></view>
    </view>
  </view>

 

 

 

 

 

 

 

 

tab__line 如果没有相对定位的话就会把文字顶起来，absolute 可以让线脱离文档流，这样不会挤压文字的空间