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 相关文章推荐
js面向对象 多种创建对象方法小结
May 21 Javascript
JavaScript中使用Substring删除字符串最后一个字符
Nov 03 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
VueJs组件之父子通讯的方式
May 06 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
JavaScript 类的封装操作示例详解
May 16 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更新记录的代码
2008/06/07 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
php与js的区别是什么
2013/08/05 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
小程序实现日历左右滑动效果
2019/10/21 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
python实现代理服务功能实例
2013/11/15 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
python实现代码统计器
2019/09/19 Python
Python实现中值滤波去噪方式
2019/12/18 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
六五普法宣传标语
2014/10/06 职场文书
单位工作证明
2014/10/07 职场文书
打架检讨书
2015/01/27 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
javaScript Array api梳理
2021/03/31 Javascript
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle