위 챗 애플 릿 이 옵션 카드 슬라이딩 전환 을 실현 합 니 다.
먼저 효과 보기:
코드 추가:
1.index.wxml
<!--index.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"> </view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav"> </view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav"> </view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<!-- -->
<swiper-item>
<view> </view>
</swiper-item>
<!-- -->
<swiper-item>
<view> </view>
</swiper-item>
<!-- -->
<swiper-item>
<view> </view>
</swiper-item>
</swiper>
2.index.wxss
/**index.wxss**/
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;}
.swiper-tab-list{ font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #777777;
}
.on{ color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
text-align: center;
}
3.index.js
//index.js
//
var app = getApp()
Page( {
data: {
/**
*
*/
winWidth: 0,
winHeight: 0,
// tab
currentTab: 0,
},
onLoad: function() {
var that = this;
/**
*
*/
wx.getSystemInfo( {
success: function( res ) {
that.setData( {
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
/**
* tab
*/
bindChange: function( e ) {
var that = this;
that.setData( { currentTab: e.detail.current });
},
/**
* tab
*/
swichNav: function( e ) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
}
})
현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
애플 릿 이미지 새로 고침, nginx 재 작성 url 제거 인자이전에 nginx 로 이미지 서버 를 만 들 었 는데 전단 에 작은 프로그램 을 사 용 했 습 니 다. 작은 프로그램 이 출시 된 후에 그림 이 새로 고침 되 지 않 는 것 을 발 견 했 습 니 다. 조사 한 결과 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.