レターアプレットのマイクロ - スイッチカスタムメニューバーアセンブリのタブバー

レンダリング：

 

 

wxmlコード：

<ビュークラス = " top_tabbar " >  
  <ブロックWX：のため = " {{}} itemNameに" WX：キー= " {{索引}} " >
     <ビュークラス = " ITEM_NAME {{のtabIndex ==インデックス'アクティブ'：？ ''}} " bindtap = " handleItem "データ・インデックス= " {{索引}} " >
        <テキスト> {{アイテム}} </テキスト>
      </ビュー>
  </ブロック>
</ビュー>

wxssコード：

.top_tabbar {
  幅：100％;
  背景 - 色：#FFFFFF;
  表示：フレックス。
  位置：固定;
}
。項目名{
  テキスト - 整列：センター;
  マージン：20rpx 60rpx。
  色：グレー。
}
.active {
  色：ライトグリーン。
}
.activeテキスト{
    パディング - 下：10rpx。
    国境 - 下：4rpx固体ライトグリーン。
}

JSコード：

データ：{
    itemNameに：[ " 軍隊"、" 星"、" アニメーション"、" 風景" ]、
    tabIndex：0
  }、
// クリックイベントを取得
handleItem（E）{
     // はconsole.log（E）
    constのインデックス= e.currentTarget.dataset.index
     この.setDataを（{
      tabIndex：インデックス
    }）
  }