ionic实现带字的toggle滑动组件
作者:lishihong108 发布时间:2024-04-16 09:25:45
标签:ionic,toggle,滑动,组件
前言
由于项目中需要带字的toggle滑动组件,而ionic提供的是这样的:
实际项目中需要这样子的:
在网上找了下其他的实现,感觉没得类似的,也没发现合适的,于是自己试着定义了一个凑合着用。先上效果图
看效果图边缘有模糊锯齿现象,可能是由于像素的影响,在android和ios手机上表现非常流畅。
实现代码
其实实现起来也很简单,主要是算好滑块的位置,滑动用的是css的transform.
css用到的类如下:
.switch_search{
position:relative;display:flex;width:120px;height:28px;
margin-top:8px;border:solid 1px #fff;border-radius:16px;
}
.switch_search_tab{
flex:1;height:28px;width:60px;
line-height:28px;color:#203C4B;z-index:12;
}
.white_search_tab{
color:#fff;
}
.switch_bg{
background:#fff;border-radius:16px;position:absolute;
top:-1px;left:-1px;height:28px;width:60px;
}
.search_right{
transition: -webkit-transform,transform 0.6s ease;
-webkit-transform: translate3d(60px, 0, 0);
-moz-transform: translate3d(60px, 0, 0);
transform:translate3d(60px, 0, 0);
}
.search_left{
transition: -webkit-transform,transform 0.6s ease;
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
transform:translate3d(0px, 0, 0);
}
页面上html代码:
<div class="switch_search">
<div class="switch_search_tab" on-swipe-right="activeSlideSearch(1)" ng-click="activeSlideSearch(0)" ng-class="(slideIndexSearch==0 ||slideIndexSearch==-1) ? '' : 'white_search_tab'">
月
</div>
<div class="switch_search_tab" on-swipe-left="activeSlideSearch(0)" ng-click="activeSlideSearch(1)" ng-class="(slideIndexSearch==1) ? '' : 'white_search_tab'">
日
</div>
<div class="switch_bg" ng-class="(slideIndexSearch==0 ||slideIndexSearch==-1) ? 'search_left' :'search_right'"></div>
</div>
对应的Controller js代码如下:
$scope.slideIndexSearch=-1;
$scope.activeSlideSearch = function(index) {
$scope.slideIndexSearch=index;
};
如此,便可实现简单的带字的滑动的toggle组件。
来源:http://blog.csdn.net/lishihong108/article/details/52239901
0
投稿
猜你喜欢
- 概述基于Swoole的websocket服务,再之前的消息系统系列的第4篇,实现了更加复杂的业务场景,是对消息推送的完善和优化,代码本身就是
- 本文实例讲述了scrapy自定义pipeline类实现将采集数据保存到mongodb的方法。分享给大家供大家参考。具体如下:# Standa
- 本文实例为大家分享了python OpenCV来表示USB摄像头画面的具体代码,供大家参考,具体内容如下确认Python版本$ python
- 实验条件:从1张图像随机裁剪100张图像裁剪出图像的大小为 60 x 60IoU 大于等于 th=0.6 的裁剪框用红色标出,其它裁剪框用蓝
- title: 利用Django实现一个能与用户交互的初级框架author: Sun-Winddate: September 1, 2021D
- PYTHON3介绍Python是著名的“龟叔”Guido van Rossum在 * 圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语
- 今天要聊聊用 PyTorch 进行 C++ 扩展。在正式开始前,我们需要了解 PyTorch 如何自定义module。这其中,最常见的就是在
- Mysql Table doesn't exist问题程序连接Mysql的时候总是提示表不存在,Table 'xx.QRTZ
- 问题:数据库附加.mdf文件时,提示无法打开物理文件,操作系统错误5:"5(拒绝访问)" 错误:5120。解决方案: 数
- 本文实例讲述了python中__slots__的用法。分享给大家供大家参考。具体分析如下:定义__slots__ 后,可以再实例上分配的属性
- 俗话说,“工欲善其事,必先利其器”。对于前端开发工程师来说,基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享2
- 前言众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型,如果直接将字符串和数字拼接会直接报错。如以下的代码:
- 本文实例讲述了Python爬虫框架Scrapy基本用法。分享给大家供大家参考,具体如下:Xpath<html><head&
- 类:在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~
- 译注:原文是StackOverflow上一个如何用程序读取迷宫图片并求解的问题,几位参与者热烈地讨论并给出了自己的代码,涉及到用Python
- 一.安装环境这里也顺便记录一下如何在windows7上卸载解压版MySQL5.6数据库,如果无需卸载请忽略下一步,直接看第三步即可二.win
- 前言这篇文章主要介绍了JS大坑之19位数的Number型精度丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- 本文实例讲述了Python解析json的方法。分享给大家供大家参考,具体如下:刚学习到Python中解析json的方法,觉得有必要在这里坐下
- 注意:什么路径不可改就搜索该路径进行删除注册表记录,然后重启电脑按 win键盘+R输入 regedit 进去注册表,点击计算机按“编辑”--
- 1、表中字段区分大小写的设置在使用gorm查询的时候,会出现账户名A和a是一样的情况,是因为mysql默认不区分大小写造成的1.问题产生的原