微信小程序手写tab切换

wx:for="{{list}}"用来循环数组

<view wx:for="{{list}}">
{{index}} {{item.name}}
</view>

循环列表比 if 优先级高
如果写在一个标签上

for(){
  if(){
  }
}
else{
}

wx:for 和 wx:if 分成两层处理

bindtap点击事件

<view bindtap="goDetail" data-id="{{item.id}}">

wxml内容：

 <view class="btn_box_item" bindtap="toggleTabs" wx:for="{{tabsParam}}" wx:key="id" data-index="{{index}}">
     <text  class="btn_text {{index==nowTab ?'btn_selected':''}}">{{item.name}}</text>
     <text  class="line_void {{index==nowTab ?'line_selected':''}}"></text> 
</view>

    <view class="tips_container">
      <!-- 接种禁忌 -->
      <view wx:if="{{nowTab==0}}">
        <view class="tips_text_box" wx:for="{{tabItem.text1}}" wx:key="id" data-index="{{index}}">
          <text class="tips_text">{{item}}</text>
        </view>
      </view>
      <!-- 暂缓接种 -->
      <view wx:if="{{nowTab==1}}">
        <view class="tips_text_box" wx:for="{{tabItem.text2}}" wx:key="id" data-index="{{index}}">
          <text class="tips_text">{{item}}</text>
        </view>
      </view>
      <!-- 温馨提示 -->
      <view wx:if="{{nowTab==2}}">
        <view  class="tips_text_box" wx:for="{{tabItem.text3}}" wx:key="id" data-index="{{index}}">
          <text class="tips_text">{{item}}</text>
        </view>
      </view>
    </view>

下划条：

.btn_selected::after{
  content: '';
  display: inline-block;   
  height: 4rpx;
  width: 40rpx;
  background-color: #0079FE;
  position:absolute ;
  bottom: 6rpx;
  left: 46rpx;
}

js内容：

var app = getApp()

Page({
  data: {
    tabsParam:[
      {
        name:'接种禁忌',
        value:'tab1'
      },
      {
        name:'暂缓接种',
        value:'tab2'
      },
      {
        name:'温馨提示',
        value:'tab3'
      },
    ],
    nowTab:0,//默认第一个tab为激活状态
    tabItem:{
      text1:{
      ...
      },
      text2:{
      ...
      },
      text3:{
      ...
      },
    }
  },

  toggleTabs:function(tab){
    this.setData({
      nowTab:parseInt(tab.currentTarget.dataset.index)
    })
  },