위 챗 애플 릿 이 상단 일반 옵션 효과 구현(swiper 가 아 닌)

배경:얼마 전에 보너스 빼 앗 기 애플 릿 을 썼 는데 그 안에 상단 옵션 카드 가 있어 서 빼 냈 습 니 다.
효과 그림:

아래 코드 바로 올 리 기:
wxml:

<view class="navbar"> 
 <text wx:for="{{navbar}}" data-index="{{index}}" 
 class="item {{currentIndex==index?'active':''}}" 
 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 
 }); 
 },
이상 은 실현 과정의 기본 코드 로 중간 내용 의 코드 를 절약 했다.상단 개 수 는 순환 되 어 자신의 실제 수요 에 따라 설정 할 수 있 습 니 다.
첨부:swiper 상단 옵션 링크
현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기