小程序左右标签滑块排行榜

标题图

小程序左右标签滑块排行榜

效果:

<view class="menu"><view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">成绩</view><view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">勤奋</view><view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">考勤</view>
</view>
<view class="content"><view class="hr"></view><swiper current="{{currentTab}}" style="height:800px;"><swiper-item><include src="cj.wxml" /></swiper-item><swiper-item><include src="qinfen.wxml" /></swiper-item><swiper-item><include src="kq.wxml" /></swiper-item></swiper>
</view>

.menu {display: flex;flex-direction: row;width: 100%;background-color: #09f;height: 40px;
}.select {font-size: 12px;color: #09f;width: 33%;background-color: #fff;text-align: center;height: 30px;line-height: 30px;border: 1px solid #fff;border-radius: 3px;
}.default {width: 33%;font-size: 12px;text-align: center;height: 30px;line-height: 30px;color: #fff;border: 1px solid #fff;border-radius: 3px;
}.rank {width: 100%;text-align: center;background-color: #193d56;height: 200px;align-items: center;
}.rank image {margin-top: 20px;border-radius: 50%;
}.name {margin-top: 10px;margin-bottom: 10px;color: #fff;
}.stat {color: #fff;font-size: 15px;
}.item {display: flex;flex-direction: row;padding: 10px;align-items: center;
}.num {width: 10%;
}.desc {margin-left: 20px;width: 55%;
}.name1 {font-size: 16px;
}.school {margin-top: 5px;font-size: 12px;
}.count {width: 15%;text-align: right;
}.unit {width: 5%;font-size: 11px;text-align: right;
}.line {border: 1px solid #ccc;opacity: 0.2;
}.schoolName {width: 70%;
}

{"navigationBarTitleText": "排行榜"
}

Page({data: {currentTab: 0},switchNav: function(e) {var page = this;var index = e.target.dataset.current;if (this.data.currentTab == index) {return false;} else {page.setData({currentTab: index});}}
})