ionic实现带字的toggle滑动组件
作者:lishihong108 时间:2024-04-16 09:25:45
前言
由于项目中需要带字的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
标签:ionic,toggle,滑动,组件
0
投稿
猜你喜欢
Vue中keep-alive的两种应用方式
2024-05-09 15:10:53
超越MYSQL,ACCESS复合承载
2008-12-09 13:31:00
讲解如何利用 Python完成 Saga 分布式事务
2021-08-19 00:03:48
python连接mongodb数据库操作数据示例
2024-01-14 19:16:54
Python实现的桶排序算法示例
2021-01-04 09:09:14
四种方法在SQL Server数据库中成批导入数据
2009-02-19 17:25:00
完美解决phpstudy安装后mysql无法启动(无需删除原数据库,无需更改任何配置,无需更改端口)直接共存
2023-11-14 17:39:47
检测SQL Server是否有特洛伊木马
2009-02-24 15:19:00
Python利用Gradio与EasyOCR构建在线识别文本的Web应用
2023-05-31 09:35:57
TensorFlow的权值更新方法
2022-12-24 21:41:08
Python基于纹理背景和聚类算法实现图像分割详解
2023-11-15 20:05:46
windows下pycharm安装、创建文件、配置默认模板
2023-11-25 03:30:26
深入理解Golang的单元测试和性能测试
2024-05-05 09:27:42
PHP-FPM运行状态的实时查看及监控详解
2023-11-22 22:45:22
*.HTC 文件的简单介绍
2008-11-24 17:36:00
sql 存储过程分页代码 支持亿万庞大数据量
2011-09-30 11:16:46
Python实现简单的代理服务器
2023-03-28 15:13:50
Python正则简单实例分析
2023-03-10 16:49:59
JS实现在文本指定位置插入内容的简单示例
2024-04-19 10:15:17
Flash的Fallback Content等
2010-04-01 12:18:00