天天看点

AlloyTouch之select选择插件

<a href="https://github.com/alloyteam/alloytouch/wiki/simple-select">原文地址:https://github.com/alloyteam/alloytouch/wiki/simple-select</a>

很多情况下,产品希望统一安卓和ios select交互和样式。但是众所周知,ios和安卓的select唤起的选择界面并不是样的,甚至ios不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的。而且省市区多选的需求,不管是ios和安卓都没有提供原生界面的支持。所以唯一的办法就是web去模拟select唤起界面。

AlloyTouch之select选择插件

如上图所以,中间的区域是支持触摸运动。什么触摸运动?alloytouch不就是专门干这个的吗!

但是需要停在某个日期上!什么需要停在某个日期上?alloytouch不是可以配置step的吗!

所有问题迎刃而解~

AlloyTouch之select选择插件

<a href="http://alloyteam.github.io/alloytouch/select/simple/">http://alloyteam.github.io/alloytouch/select/simple/</a>

先引用依赖的js和css文件。

然后:

options是所有项的集合

selectedindex是初始选中项的索引

change是改变的回调

complete是点击完成按钮的回调

container是触摸的区域

scroll就是滚动的对象

step就是每一个日期的高度

initialvalue是初始的位置,会根据当前的索引selectedindex乘以step计算出位置

通过上面的配置,scroll最终都会被校正到step的整数倍,小于min会回弹,大于max也会回弹。

可以看到,alloytouch很擅长处理触摸运动。当然上面只是一个简单的例子,这仅仅是一个开始!

后续还会给大家带来:

alloytouch无限循环select实战

alloytouch多项级联select实战

alloytouch实现3d效果select实战

<a href="https://github.com/alloyteam/alloytouch">https://github.com/alloyteam/alloytouch</a>

你要触摸的一切都在这里。

继续阅读