专栏首页达达前端小程序左右标签滑块排行榜

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

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

效果:

效果

<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 点赞

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 电商项目(上)

    :nth-last-child(n): 选择器匹配属于其元素的第n个子元素的每个元素

    达达前端
  • Day6:html和css

    达达前端
  • 电商项目(下)

    感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。

    达达前端
  • 带新手玩转MVC——不讲道理就是干(上)

    前言:这几天更新了几篇博客,都是关于Servlet、JSP的理解,后来又写了两种Web开发模式,发现阅读量还可以,说明JSP还是受关注的,之前有朋友评论说JSP...

    泰斗贤若如
  • bootstrap 中的 less

    Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能。

    用户5760343
  • 前端基础-CSS基础(七)

    efonfighting
  • css3 transition 原

    css3 transition 需要4个参数  transition-property, transition-duration, transition-t...

    tianyawhl
  • CSS3 box-shadow实现背景动画

    box-shadow,向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略...

    Javanx
  • 从浅到深的学习 CSS3阴影(box-shadow)

    知识点: 1、外 box-shadow 前四个参数:x 偏移值、y 偏移值 、模糊半径、扩张半径。 2、单侧投影的核心是第四个参数:扩张半径。这个参数会根据...

    Javanx
  • CSS3径向渐变实现优惠券波浪造型

    很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

    Javanx

扫码关注云+社区

领取腾讯云代金券