위챗 애플릿 페이지 내비게이션
14076 단어 일상 노트
<view class="navbar">
<lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
<text>{{item}}</text>
</lable>
</view>
<view class="zhanwei"></view>
<!-- -->
<view hidden="{{currentTab!==0}}" >
<view wx:if="{{list.length>0}}">
<!-- -->
<view class='cont_count' wx:for="{{list}}" wx:key="key" >
</view>
</view>
<!-- -->
<view wx:else>
<!-- -->
<view class='cont_count'>
<label class='none_tab'> </label>
</view>
</view>
</view>
<!-- -->
<view hidden="{{currentTab!==1}}" >
<view wx:if="{{list.length>0}}">
<!-- -->
<view class='cont_count' wx:for="{{list}}" wx:key="key" >
</view>
</view>
<!-- -->
<view wx:else>
<!-- -->
<view class='cont_count'>
<label class='none_tab'> </label>
</view>
</view>
</view>
.js
data: {
navbar: [' ', ' '],
currentTab:0,
},
// tab
navbarTap: function (e) {
var that = this;
this.setData({
currentTab: e.currentTarget.dataset.idx
})
that.data.currentTab = e.currentTarget.dataset.idx
console.log(e.currentTarget.dataset.idx)
if (e.currentTarget.dataset.idx==0){
}else{
}
},
wxss
.navbar{
display: flex;
background: #fff;
position: fixed;
z-index: 9999;
width: 100%
}
.zhanwei{
width: 100%;
height: 86rpx;
}
.navbar .item{
position: relative;
flex: auto;
font-size: 27rpx;
width: 100rpx;
text-align: center;
line-height: 80rpx;
color: #999999;
border-bottom: 6rpx solid #ddd;
}
/* */
.navbar .item.active{
color: #5ABE64;
border-bottom: 6rpx solid #5ABE64;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
에이전트 IP원리: 호스트로 프록시 IP에 먼저 접근한 다음에 프록시 IP 주소를 통해 인터넷에 접근한다. 사이트(서버)가 수신한 액세스 IP는 프록시 IP이다. urllib.request.ProxyHandler() 동적 설정 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.