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 Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
Sep 28 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
vue动态设置页面title的方法实例
Aug 23 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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语法(1)
2006/10/09 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python更新所有已安装包的操作
2020/02/13 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
企业文化标语口号
2014/06/09 职场文书
受伤赔偿协议书
2014/09/24 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
Python基础之操作MySQL数据库
2021/05/06 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
只用Python就可以制作的简单词云
2021/06/07 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python