집 >위챗 애플릿 >미니 프로그램 개발 >탭 기능을 구현한 위챗 애플릿
탭 브라우징은 단일 브라우저 창에서 여러 웹사이트를 열 수 있는 Internet Explorer의 기능입니다. 새 탭에서 웹 페이지를 열고 보려는 탭을 클릭하여 페이지 간에 전환할 수 있습니다. 탭 브라우징을 사용하면 작업 표시줄에 표시되는 항목 수를 잠재적으로 줄일 수 있습니다. 이 기사에서는 탭 기능을 구현하는 WeChat 애플릿을 공유하겠습니다.
먼저 WeChat 미니 프로그램에서 탭의 효과를 살펴보세요.
먼저 배치한 다음(말할 필요도 없이) 위의 각 탭에서 동일하게 정의하는 것이 원칙입니다. 이벤트를 클릭하세요. 그런 다음 클릭 이벤트가 트리거되면 바인딩된 식별자를 가져오고 현재 클릭된 탭을 확인한 다음 아래에 표시되어야 하는 부분을 결정합니다.
wxml :
<view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text> <text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text> </view> <view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view> <view class="tab2" hidden="{{menuTapCurrent!='1'}}">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 }); },
관련 추천:
WeChat 미니 프로그램 로봇 자동 고객 서비스 기능
WeChat 미니 프로그램 모방 Hema Xiansheng
WeChat 미니 프로그램 상세 설명 비디오 , 음악 및 그림 구성 요소
위 내용은 탭 기능을 구현한 위챗 애플릿의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!