집 >위챗 애플릿 >미니 프로그램 개발 >탭 페이지 전환을 구현하기 위한 WeChat 애플릿 개발
이 글에서는 WeChat 애플릿 개발 시 탭(창 상단의 TabBar) 페이지 전환을 주로 소개합니다. 필요한 경우 더 자세히 알아볼 수 있습니다.
탭은 위챗 애플릿에서 개발 중인데, 안드로이드에서는 탭이 일반적으로 프래그먼트를 사용하는데, 애플릿이라고 하면 순간 헷갈리네요.
드디어 만들어서 확인해 보세요.
효과 먼저 보세요:
코드를 다시 업로드하세요:
1.index.wxml
<!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view> <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view> </view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <!-- 我是哈哈 --> <swiper-item> <view>我是哈哈</view> </swiper-item> <!-- 我是呵呵 --> <swiper-item> <view>我是呵呵</view> </swiper-item> <!-- 我是嘿嘿 --> <swiper-item> <view>我是嘿嘿</view> </swiper-item> </swiper>
2.indexwxss
/**indexwxss**/ swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} swiper-tab-list{ font-size: 30rpx; display: inline-block; width: 33%; color: #777777; } on{ color: #da7c0c; border-bottom: 5rpx solid #da7c0c;} swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } swiper-box view{ text-align: center; }
3.index.js
//index.js //获取应用实例 var app = getApp() Page( { data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, onLoad: function() { var that = this; /** * 获取系统信息 */ wxgetSystemInfo( { success: function( res ) { thatsetData( { winWidth: reswindowWidth, winHeight: reswindowHeight }); } }); }, /** * 滑动切换tab */ bindChange: function( e ) { var that = this; thatsetData( { currentTab: edetailcurrent }); }, /** * 点击tab切换 */ swichNav: function( e ) { var that = this; if( thisdatacurrentTab === etargetdatasetcurrent ) { return false; } else { thatsetData( { currentTab: etargetdatasetcurrent }) } } })
이런 탑이군요 뷰페이지와 비슷한 옵션으로 카드가 나왔어요
위 내용은 모두의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 추천:
WeChat 미니 프로그램에서 페이지 점프 값 전송 구현
WeChat 애플릿 사용 방법
페이지 전환을 위한 모니터링 제스처 슬라이딩 구현
위 내용은 탭 페이지 전환을 구현하기 위한 WeChat 애플릿 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!