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

标题图

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

效果:

效果

<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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="cj.wxml" />
    </swiper-item>
    <swiper-item>
      <include class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="qinfen.wxml" />
    </swiper-item>
    <swiper-item>
      <include class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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
      });
    }
  }
})

作者：达叔小生
链接：https://www.jianshu.com/p/29928b8f9c02