위 챗 애플 릿 상단 옵션(swiper)구현
효과 그림:
아래 코드 바로 올 리 기:
wxml:
<!--pages/index/index.wxml-->
<view class="swiper-tab">
<view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"> </view>
<view class="tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav"> </view>
<view class="tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav"> </view>
</view>
<swiper current="{{currentTab}}" class="swiper" duration="300" style="height:{{winHeight - 30}}px" bindchange="bindChange">
<swiper-item>
<view> </view>
</swiper-item>
<swiper-item>
<view> </view>
</swiper-item>
<swiper-item>
<view> </view>
</swiper-item>
</swiper>
wxss:
/* pages/index/index.wxss */
.swiper-tab{
width: 100%;
text-align: center;
line-height: 80rpx;
border-bottom: 1px solid #000;
display: flex;
flex-direction: row;
justify-content: center;
}
.tab-item{
flex: 1;
font-size: 30rpx;
display: inline-block;
color: #777777;
}
.on{
color: red;
border-bottom: 5rpx solid red;
}
.swiper{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper view{
text-align: center;
padding-top: 100rpx;
}
js:
// pages/index/index.js
Page({
/**
*
*/
data: {
winWidth:0,
winHeight:0,
currentTab:0
},
/**
* --
*/
onLoad: function (options) {
var that = this;
/**
*
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
} ,
/**
* --
*/
onPullDownRefresh: function () {
},
/**
*
*/
onReachBottom: function () {
},
/**
*
*/
onShareAppMessage: function () {
}
})
이상 은 실현 과정 이 므 로 전체적으로 어렵 지 않다.참고 하 시기 바 랍 니 다.만약 에 여러분 이 깊이 공부 하고 싶다 면 두 개의 멋 진 주 제 를 클릭 할 수 있 습 니 다.javascript 옵션 조작 방법 집합jquery 옵션 조작 방법 집합
현재 관심 도가 높 은 위 챗 애플 릿 튜 토리 얼 을 추천 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.