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

标题图

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

效果:

效果

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

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql pxc_MySQL之PXC集群搭建

一、PXC 介绍1.1 PXC 简介PXC 是一套 MySQL 高可用集群解决方案&#xff0c;与传统的基于主从复制模式的集群架构相比 PXC 最突出特点就是解决了诟病已久的数据复制延迟问题&#xff0c;基本上可以达到实时同步。而且节点与节点之间&#xff0c;他们相互的关系是对等的。PXC 最…

Nashorn简介

引入了Java 8和名为“ Nashorn”的新JavaScript引擎。 Nashorn基于Da Vinci Machine&#xff0c;该项目旨在为JVM添加动态语言支持。 Nashorn是使混合软件比以前更轻松的一个很好的里程碑。 该引擎的出色功能使您能够在Java&#xff08;任何其他编译语言&#xff09;代码和java…

CCF关于NOIP竞赛程序提交的管理规则

在NOIP复赛中&#xff0c;NOI各省组织单位必须严格遵循CCF《关于NOIP数据提交格式的说明》的规范在竞赛结束后规定时间内向CCF提交本赛区所有参赛选手的程序。 为竞赛的公平以及赛后按时完成竞赛程序的评测&#xff0c;制定本规则。 提高组&#xff1a;每次赛后3小时内提交&…

计算机三级信息安全技术考什么2019,2019计算机三级信息安全技术精品练习8

2019计算机三级信息安全技术精品练习82019-06-19 16:37:49来源&#xff1a;计算机等级考试网分享导读&#xff1a;还不知道全国计算机等级考试时间吗&#xff1f;2019年考试共举行4次&#xff0c;下一次考试时间为9月份&#xff0c;距离考试的时间越来越短了&#xff0c;已经报…

微软Visual Studio2005开发工具路线图详解

微软Visual Studio2005开发工具路线图详解 随着企业需要的不断演变&#xff0c;Microsoft 依旧致力于提供创新的开发人员工具来满足这些不断变化的需求&#xff0c;从而确保客户的成功。为帮助组织规划未来的软件开发工作&#xff0c;Microsoft 提供了一个开发人员工具计划版本…

解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时&#xff0c;图表显示错乱 <canvas class"kcanvas" canvas-id"ringCanvas" hidden"{{currentTab 1}}"></canvas> <view hidden"{{currentTab ! 1}}…

mysql字段唯一确定_验证表里某不确定的字段的值是否唯一的方法?

你这个问题是否可以理解为“验证表里的某一不确定的字段的值&#xff0c;没有重复”&#xff1f;如果是的话&#xff0c;那么你就可以先查出表的总记录数&#xff0c;然后在查出该字段去重之后的总记录数&#xff0c;对比两次结果&#xff0c;如果数量相同则没有重复&#xff1…

说下Java堆空间结构,及常用的jvm内存分析命令和工具

Java堆空间结构图&#xff1a;http://www.cnblogs.com/SaraMoring/p/5713732.html JVM内存状况查看方法和分析工具&#xff1a; http://blog.csdn.net/neosmith/article/details/47753733 转载于:https://www.cnblogs.com/zhuyeshen/p/11005208.html

Java EE:基础知识

想要了解一些基本原则&#xff0c;即与Java EE相关的技术术语。 对于许多人来说&#xff0c;Java EE / J2EE仍然最多意味着Servlet&#xff0c;JSP或Struts。 没有冒犯或双关语&#xff01; 无论如何&#xff0c;这不是Java EE的“圣经”。 我没有能力写这样的东西&#xff01…

自定义鼠标样式

效果图展示&#xff1a; 代码 &#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&q…

空军军医大学计算机复试线,空军军医大学2019年考研复试分数线

2019考研国家线公布之后&#xff0c;各招生院校会于3月中下旬陆续公布分数线&#xff0c;大家需要密切关注。空军军医大学2019年考研复试分数线已经公布&#xff0c;大家赶紧看一下及时准备复试和调剂吧!广大考生&#xff1a;我校2019年硕士研究生第一志愿复试工作拟于近期启动…

微信小程序开发POST请求

微信小程序开发POST请求 wx.request( { url: "http://op.juhe.cn/onebox/weather/query", header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", //data: { cityname: "上海", key: &…

C#入门代码

一、从控制台读取东西代码片断&#xff1a;using System;class TestReadConsole{public static void Main(){Console.Write(Enter your name:);string strName Console.ReadLine();Console.WriteLine( Hi strName);}}二、读文件代码片断&#xff1a;using System; using Syst…

amoeba mysql proxy_mysql proxy amoeba安装配置

MySQL想要做读写分离&#xff0c;目前可以有三种解决方式&#xff1a;1 程序修改mysql操作类优点&#xff1a;直接和数据库通信&#xff0c;简单快捷的读写分离和随机的方式实现的负载均衡&#xff0c;权限独立分配缺点&#xff1a;自己维护更新&#xff0c;增减服务器在代码处…

Java数组,Wat!

数组可以做一些令人惊讶的事情。 是否是数组&#xff1f; Serializable array new Serializable[9];数组是数组还是标量&#xff1f; 好吧&#xff0c;它是指向数组的标量。 就像 Object o new Object[9];您可以将数组分配给对象&#xff0c;因为它也是对象。 但是&#xf…

6.11python 作业

1.课堂例子: 01初识python #!/usr/bin/env python # -*- coding: utf-8 -*-# print(hello world!)print(hello world!) name lyj print(name)# id,type,value x 10 y 10 python小计数池(python优化机制):在变量值产生后指定的范围内&#xff0c;在内存中事先开辟一块内存空间…

linux下常用命令

创建软连接&#xff1a;ln -s b a //为b创建一个快捷方式a&#xff0c;只是一个镜像&#xff0c;不占用空间。 ln -sf b a //差不多 &#xff0c;-f强制执行 ln b a //创建硬链接&#xff0c;会占用相同的大小空间&#xff08;不允许给目录创建硬链接&#xff09; svn…

vue.extend与vue.component的区别和联系

一味的闷头开发&#xff0c;却对基础概念缺乏理解&#xff0c;是个大坑... 查阅官网后现对自己的理解记录一下&#xff0c;用于日后复习巩固 Vue.extend({}) 简述&#xff1a;使用vue.extend返回一个子类构造函数&#xff0c;也就是预设部分选项的vue实例构造器。 后可使用vu…

2012服务器系统关闭网络共享,提供网络服务的前提,Windows Server 2012如何更改高级共享设置...

今天介绍系统提供网络服务的前提&#xff0c;Windows Server 2012 R2操作系统如何更改高级共享设置。小伙伴们可能都听说&#xff0c;网络配置是提供各种网络服务的前提。Windows Server 2012 R2操作系统安装完成以后&#xff0c;默认为自动获取IP地址&#xff0c;自动从网络中…

[学习笔记]几个英语短句(1)

Mind (you)!<口语>听着&#xff01;Mind , I dont say that it is certain.mind your back<口语>让开&#xff0c;让我通过。Mind your own business.你别管闲事。This is not your business.within an inch of 差点儿&#xff0c;险些&#xff01;The athlete was…