ionic实现带字的toggle滑动组件
更新时间:2016年9月1日 10:00 点击:2120
前言
由于项目中需要带字的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组件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了Vue 过渡(动画)transition组件案例详解,非常不错,具有参考借鉴价值,需要的朋友参考下...2017-01-26
- 这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24
- 在网页中,经常见到进度条效果,那么这些个性的进度条组件效果是怎么实现的呢,下面脚本之家小编给大家分享Bootstrap进度条组件知识详解,感兴趣的朋友要求学习吧...2016-05-04
- 这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法,以实例为大家分享了Bootstrap折叠组件,感兴趣的小伙伴们可以参考一下...2016-02-26
- 这篇文章主要为大家分享了js滑动提示效果代码,实现方法简单,感兴趣的小伙伴们可以参考一下...2016-03-12
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了基于Vue的文字跑马灯组件(npm 组件包),需要的朋友可以参考下...2017-05-27
- Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用,感兴趣的朋友一起看看吧...2016-06-12
- 在日常项目开发中我们经常见到下拉刷新上拉加载的功能,接下来通过本文给大家介绍ionic如何实现下拉刷新与上拉加载的相关资料,需要的朋友可以参考下...2016-06-12
- 在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,基于ionic怎么实现呢?下面小编给大家分享ionic中列表项增加和删除的实现方法,一起看看吧...2017-01-26
- 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。本文给大家介绍Bootstrap列表组组件,感兴趣的朋友一起学习吧...2016-05-05
- 这篇文章主要介绍了Bootstrap组件系列之福利篇几款好用的组件(推荐) 的相关资料,需要的朋友可以参考下...2016-06-24
- 这篇文章主要介绍了JavaScript资源预加载组件和滑屏组件的使用推荐,分别为preload和slide的用法讲解,使用起来非常简单,需要的朋友可以参考下...2016-03-12
- 这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件,对bootstrap icon图标相关知识感兴趣的朋友一起学习吧...2016-02-01
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
这篇文章主要介绍了jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-06-24- 这篇文章主要介绍了jQuery技巧之让任何组件都支持类似DOM的事件管理 的相关资料,需要的朋友可以参考下...2016-04-06
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
这篇文章主要介绍了Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析的相关资料,需要的朋友可以参考下...2016-01-21BootStrap 图片样式、辅助类样式和CSS组件的实例详解
这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码,图文并茂介绍的非常详细,需要的朋友参考下吧...2017-01-23