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

悠悠 2021-09-17 03:42 371阅读 0赞

小程序左右标签滑块排行榜  
![标题图][1240]

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

效果:

![效果][1240 1]

.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][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/00207b56cfe140da8a48c98600c0c2ec.png
[1240 1]: /images/20210724/1dcb54d8f31b4891be7588bd44db9d85.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1