간단한 Tab 전환 효과 구현
단계 사용
코드는 다음과 같습니다(예 보기).
상태status 정의
data: {
status: 0,
},전환을 클릭할 때status를 이용하여 인덱스 아래 표시에 따라 전환합니다
js 코드:
handtab(e) {
console.log(e);
let index = e.currentTarget.dataset.index
console.log(index);
this.setData({
currentIndex: index,
status: e.currentTarget.dataset.index
// status index
})
},
<view>
<block wx:for="{{data}}" wx-key="index" class="list_top">
<view data-index="{{index}}" class="list_one {{index==currentIndex?'active':''}}" bindtap="handtab">{{item.name}}
</view>
</block>
<block wx:for="{{shopList}}" wx:key="index">
<view class="shopList_box" bindtap="handDetail" data-id="{{item.goods_id}}" wx:if="{{status==0}}">
// wxml wx:if status == 0 tab
<view class="shopList_left">
<image src="{{item.goods_big_logo}}"></image>
</view>
<view class="shopList_right"> <text class="right">{{item.goods_name}}</text>
<text class="price">￥{{item.goods_price}}</text>
</view>
</view>
</block>
<block>
//status==1
<view wx:if="{{status==1}}">2</view>
</block>
<block>
//status==2
<view wx:if="{{status==2}}">3</view>
</block>
</view>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
유니앱, 위챗 애플릿에서 MQTT 사용 문제(1)MQTT.js는 JavaScript로 작성된 MQTT 프로토콜의 클라이언트 라이브러리로 Node에 사용할 수 있습니다.js와 브라우저.노드에서.js단은 전역 설치를 통해 명령행 연결을 사용할 수 있으며 MQTT...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
