android仿iphone的时间轮的工具demo,利用swiper仿iphone时间设置滚轮控件(示例代码)...

先贴一下实现之后的样子：

可以上下滚动选择，也可以点击选择。

具体实现：

1.关于swiper的使用就不多说啦，去官网看下都能明白。

2.然后是初始化swiper，这才是重点

var swiper = new Swiper(‘.swiper-container‘, {

slidesPerView:5,//每页显示的side个数

paginationClickable: true,//是否支持点击

spaceBetween: 5,//每个side的距离

direction: ‘vertical‘,//是否?垂直居中

centeredSlides: true,//是否显示居中

initialSlide :0,//初始位置

slideToClickedSlide:true//是否点击居中

});

初始完之后，就是对样式的调整，为了达到以下的效果，我们需要调整样式

我们可以利用这三个类，分别表示当前选中的slide的前一个，当前的slide，接下来的slider

让选中的slider的font-size变大，前后的slider变小，其他的slider变的更小

.swiper-slide{text-align:center;background:#fff;color:gray;

/*Center slide text vertically*/display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;

}.swiper-slide-active{color:black;font-size:20px;

}.swiper-slide-prev{font-size:16px;

}.swiper-slide-next{font-size:16px;

}

ok，这样就有点样子啦。然后是这两条分割线。

我实现的思路是用定位，将一个div定上去，因为swiper设置了居中的属性，我们只要让居中那个slider展示在这个div里面就可以啦。

.active_line{position:absolute;width:90%;left:5%;top:50%;margin-top:-0.2rem;height:0.4rem;border-top:1px solid #ddd;border-bottom:1px solid #ddd;z-index:9;

}

不过要注意的一点是z-index的设置。

在项目实现的过程中，有一点也是让我琢磨了一番，毕竟是引用swiper。当初始化的时候，整个html结构是必须存在的

Slide 1 背景

android仿iphone的时间轮的工具demo,利用swiper仿iphone时间设置滚轮控件(示例代码)...相关推荐

android 仿iphone滚轮,android仿iphone滚轮控件显示效果
android仿iphone滚轮控件显示效果,供大家参考,具体内容如下在论坛里看到的,自己弄个效果: 这个滚动的WheelView /* * Android Wheel Control. * htt ...
日历控件的android代码,Android日历控件PickTime代码实例
Android日历控件PickTime代码实例发布时间:2020-10-03 16:05:51 来源:脚本之家阅读:86 作者:手撕高达的村长最近做项目,需要设置用户的生日,所以做这样一个功能. ...
老猪带你玩转自定义控件三——sai大神带我实现ios 8 时间滚轮控件
ios 8 的时间滚轮控件实现了扁平化,带来很好用户体验,android没有现成控件,小弟不才,数学与算法知识不过关,顾十分苦恼,幸好在github上找到sai大神实现代码,甚为欣喜,顾把学习这个控件 ...
android 5.0新增 ui 控件,android3.0新增ui控件示例说明.doc
android3.0新增ui控件示例说明 Android3.0新增UI控件 AdapterViewAnimator控件 AdapterViewAnimator(堆View),已知子类有AdapterV ...
android 横向滚轮控件,Android滚轮控件，基于ListView实现，可以自定义样式。
Android滚轮控件,基于ListView实现,可以自定义样式. Features 支持自定义滚轮样式支持common和holo两种皮肤支持文本和图文混排两中数据模版支持循环显示数据支持选中 ...
Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）
很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...
Android编程之仿iPhone滚轮控件
网上看到有人写了一个滚动组件,这个不错,大家可以看看但是,我个人觉得这里有一处不是很好,大家可以试试:不循环的情况下,如果就是最后一个选项,你把它移到最上或者最下的位置,它回滚回到选择条时,是直接跳 ...
php支付密码控件,Android高仿微信支付密码输入控件实例代码
这篇文章主要为大家详细介绍了Android高仿微信支付密码输入控件的具体实现代码,供大家参考,具体内容如下像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现 ...
Android 类似Ios的时间滚轮控件
之前项目使用的,参考了别人的一个demo,但是原文链接找不到了.... 先说如何使用: //参数1:上下文 //参数2:选中是的ResultHandler回调 //参数3:选择器最早时间 //参数4: ...

android仿iphone的时间轮的工具demo,利用swiper仿iphone时间设置滚轮控件(示例代码)...

android仿iphone的时间轮的工具demo,利用swiper仿iphone时间设置滚轮控件(示例代码)...相关推荐

最新文章

热门文章