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 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
js中split和replace的用法实例
Feb 28 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
ES6中Promise的使用方法实例总结
Feb 18 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连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
取得父标签
2006/11/14 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
AngularJS基础知识
2014/12/21 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python实现截屏的函数
2015/07/25 Python
python决策树之C4.5算法详解
2017/12/20 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
Python random模块的使用示例
2020/10/10 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
什么是方法的重载
2013/06/24 面试题
个人收入证明模板
2014/09/18 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers