편지 애플릿 마이크로 - 스위치 사용자 정의 메뉴 바 조립 TabBar의

렌더링 :

 

 

wxml 코드 :

<뷰 클래스 = " top_tabbar " >   
  <블록 WX : 대 = " {{itemName에}} " WX : 키 = " {{인덱스}} " > 
     <뷰 클래스 = " ITEM_NAME는 {{tabIndex를 == 인덱스 '활성'? '}} " bindtap = " handleItem " 데이터 인덱스 = " {{}} 인덱스 " > 
        <텍스트> 항목 {{}} </ 텍스트> 
      </ 뷰> 
  </ 블록> 
</보기>

wxss 코드 :

.top_tabbar { 
  폭 : 100 % ; 
  배경 - 색상 : #FFFFFF; 
  표시 : 플렉스; 
  위치 : 고정 ; 
} 
.item_name { 
  텍스트 - 정렬 : 센터; 
  마진 : 20rpx의 60rpx; 
  색상 : 회색; 
} 
.active는 { 
  색상 : lightgreen; 
} 
.active는 텍스트 { 
    패딩 - 하단 : 10rpx을; 
    국경 - 하단 : 4rpx 고체 lightgreen; 
}

JS 코드 :

데이터 : { 
    itemName에 : " 군사 " , " 별 " , " 애니메이션 " , " 풍경 " , 
    이 tabIndex : 0 
  }, 
// 얻을 클릭 이벤트 
handleItem (E) {
     // 을 console.log (E) 
    const를 인덱스 = E .currentTarget.dataset.index
     은이 .setData ({ 
      이 tabIndex : 인덱스 
    }) 
  }