위 챗 애플 릿 이 상단 일반 옵션 효과 구현(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 상단 옵션 링크
현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.