탭 기능을 구현한 위챗 애플릿-미니 프로그램 개발-php.cn

탭 기능을 구현한 위챗 애플릿

小云云

풀어 주다： 2018-05-15 14:15:30

원래의

2251명이 탐색했습니다.

탭 브라우징은 단일 브라우저 창에서 여러 웹사이트를 열 수 있는 Internet Explorer의 기능입니다. 새 탭에서 웹 페이지를 열고 보려는 탭을 클릭하여 페이지 간에 전환할 수 있습니다. 탭 브라우징을 사용하면 작업 표시줄에 표시되는 항목 수를 잠재적으로 줄일 수 있습니다. 이 기사에서는 탭 기능을 구현하는 WeChat 애플릿을 공유하겠습니다.

먼저 WeChat 미니 프로그램에서 탭의 효과를 살펴보세요.

먼저 배치한 다음(말할 필요도 없이) 위의 각 탭에서 동일하게 정의하는 것이 원칙입니다. 이벤트를 클릭하세요. 그런 다음 클릭 이벤트가 트리거되면 바인딩된 식별자를 가져오고 현재 클릭된 탭을 확인한 다음 아래에 표시되어야 하는 부분을 결정합니다.

wxml :

<view class="menu_box">
 <text class=&#39;menu1 {{menuTapCurrent=="0"?"borders":""}}&#39; data-current="0" catchtap="menuTap">menu1</text>
 <text class=&#39;menu2 {{menuTapCurrent=="1"?"borders":""}}&#39; data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!=&#39;0&#39;}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!=&#39;1&#39;}}">tab2</view>

로그인 후 복사

wxss:

.menu_box{
 display: flex;
 height: 80rpx;
}
.menu1,.menu2{
 flex: 1;
 font-size:30rpx;
 line-height: 80rpx;
 text-align: center;
}
.borders{
 border-bottom: 4rpx solid #f00;
 color: #f00;
}
.tab1,.tab2{
 height: 300rpx;
 background: #23bff3;
}
.tab2{
 background: #ccc;
}

로그인 후 복사

JS:

 menuTap:function(e){
 var current=e.currentTarget.dataset.current;//获取到绑定的数据
 //改变menuTapCurrent的值为当前选中的menu所绑定的数据
 this.setData({
  menuTapCurrent:current
 });


 },

로그인 후 복사