WeChat 애플릿이 상단 일반 탭의 스위퍼가 아닌 효과를 구현하는 방법의 예

이 글에서는 상단에 일반 탭의 효과를 구현하기 위한 WeChat 애플릿을 주로 소개합니다. 스와이퍼가 아니며 관심 있는 친구들이 참고할 수 있습니다.

배경: 잡기 위해 작은 앱을 작성했습니다. 얼마 전 상단 탭과 관련된 프로그램이 빨간 봉투를 꺼냅니다.

렌더링:

바로 아래 코드:

wxml:

<view class="navbar"> 
 <text wx:for="{{navbar}}" data-index="{{index}}" 
 class="item {{currentIndex==index?&#39;active&#39;:&#39;&#39;}}" 
 bindtap="navbarTab" wx:key="unique">{{item}}</text> 
 </view> 
 <view hidden="{{currentIndex!==0}}"> 

 </view> 
 <view hidden="{{currentIndex!==1}}"> 
 
 </view>

wxss:

.navbar{ 
 display: flex; 
 width: 100%; 
 flex-direction: row; 
 line-height: 80rpx; 
 position: fixed; 
 top: 0; 
} 
.navbar .item{ 
 flex: auto; 
 font-size: 30rpx; 
 text-align: center; 
 background: #fff; 
 font-weight: bold; 
} 
.navbar .item.active{ 
 color: #36DB2C; 
 position: relative; 
} 
.navbar .item.active::after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 height: 4rpx; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: #36DB2C; 
}

js:

data: { 
 navbar: ["我发出的", "我收到的"], 
 currentIndex: 0,//tabbar索引 
 }, 
 navbarTab: function (e) { 
 this.setData({ 
  currentIndex: e.currentTarget.dataset.index 
 }); 
 },

위는 구현 과정의 기본 코드이며 중간 내용 코드를 생략합니다. 상단의 숫자는 재활용되며 실제 필요에 따라 설정할 수 있습니다.

위 내용은 WeChat 애플릿이 상단 일반 탭의 스위퍼가 아닌 효과를 구현하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!