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

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

效果:

<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

小程序左右标签滑块排行榜相关推荐

image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
微信按钮android代码实现原理,微信小程序button标签open-type实现原理
这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信 ...
微信小程序时间标签与范围联动设计实现
微信小程序时间标签与范围联动设计实现?最近忙于一个有关数据管理的微信小程序开发,遇到了上图情况,虽然很简单,还是整理一下.若有错误,请广大朋友们指正. 使用微信小程序组件radio-group.pic ...
标签云打印/微信小程序蓝牙标签打印开放平台功能
微信小程序蓝牙标签打印/标签云打印开放平台(www.herro.cn),是在云端部署的云平台,支持开发者通过API调用完成标签蓝牙打印或标签云打印功能. 平台蓝牙打印模块支持各厂商各品牌蓝牙标签打印 ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
php过滑码,小程序中多滑块的实现代码
本篇文章给大家带来的内容是关于小程序中多滑块的实现代码 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近在用原生的代码开发小程序,需要用到多滑块的slider,但是官方的api只 ...
微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...
微信小程序自定义标签组件component封装、组件生命周期，组件通信
微信小程序自定义标签组件component封装.组件生命周期,组件通信本文来说下小程序的自定义标签组件封装. 相比于vue,react的非路由组件,微信小程序的component组件要麻烦些,而且生 ...

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

结语

小程序左右标签滑块排行榜相关推荐

最新文章

热门文章