小程式左右標籤滑塊排行榜

小程式左右標籤滑塊排行榜

效果:

<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
      });
    }
  }
})
 

往後餘生，唯獨有你
簡書作者：達叔小生
90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通
簡書部落格： https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊