ionic实现带字的toggle滑动组件


Posted in Javascript onAugust 27, 2016

前言

由于项目中需要带字的toggle滑动组件,而ionic提供的是这样的:

ionic实现带字的toggle滑动组件

实际项目中需要这样子的:

ionic实现带字的toggle滑动组件

在网上找了下其他的实现,感觉没得类似的,也没发现合适的,于是自己试着定义了一个凑合着用。先上效果图

ionic实现带字的toggle滑动组件 

看效果图边缘有模糊锯齿现象,可能是由于像素的影响,在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组件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
Three.js学习之网格
Aug 10 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 #Javascript
ionic实现滑动的三种方式
Aug 27 #Javascript
js select实现省市区联动选择
Apr 17 #Javascript
轻松掌握JavaScript装饰者模式
Aug 27 #Javascript
node.js实现快速截图
Aug 27 #Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 #Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 #Javascript
You might like
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
一段实用的php验证码函数
2016/05/19 PHP
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
javascript new fun的执行过程
2010/08/05 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
2018/11/26 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python 正则表达式操作指南
2009/05/04 Python
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
Django如何配置mysql数据库
2018/05/04 Python
10款最好的Python开发编辑器
2019/07/03 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
过滤器的用法
2013/10/08 面试题
机械专业技术员求职信
2014/06/14 职场文书
超市店庆活动方案
2014/08/31 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python