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

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

效果:

<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;
   100%;
  background-color: #09f;
  height: 40px;
}

.select {
  font-size: 12px;
  color: #09f;
   33%;
  background-color: #fff;
  text-align: center;
  height: 30px;
  line-height: 30px;
  border: 1px solid #fff;
  border-radius: 3px;
}

.default {
   33%;
  font-size: 12px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 3px;
}

.rank {
   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 {
   10%;
}

.desc {
  margin-left: 20px;
   55%;
}

.name1 {
  font-size: 16px;
}

.school {
  margin-top: 5px;
  font-size: 12px;
}

.count {
   15%;
  text-align: right;
}

.unit {
   5%;
  font-size: 11px;
  text-align: right;
}

.line {
  border: 1px solid #ccc;
  opacity: 0.2;
}

.schoolName {
   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 点赞