HTML5技术

AlloyTouch之select选择插件 - 【当耐特】

字号+ 作者:H5之家 来源:H5之家 2017-02-28 11:01 我要评论( )

写在前面 很多情况下,产品希望统一安卓和IOS select交互和样式。但是众所周知,IOS和安卓的select唤起的选择界面并不是样的,甚至IOS不同系统版本以及安卓不同系统版本下的select唤起的界面也不是相同的。而且省市区多选的需求,不管是IOS和安卓都没有提供

写在前面

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

如上图所以,中间的区域是支持触摸运动。什么触摸运动?AlloyTouch不就是专门干这个的吗!
但是需要停在某个日期上!什么需要停在某个日期上?AlloyTouch不是可以配置step的吗!

所有问题迎刃而解~

在线演示

插件使用

先引用依赖的JS和CSS文件。

然后:

[ ](item(item)

核心原理

(containerscrollselectedIndex step(len step });

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

总结

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

后续还会给大家带来:

Github

https://github.com/AlloyTeam/AlloyTouch

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


 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • [H5]range对象之selectNode等方法 - Aqiaoba

    [H5]range对象之selectNode等方法 - Aqiaoba

    2017-02-09 11:00

  • js日历选择控件 - webNick

    js日历选择控件 - webNick

    2017-01-25 13:00

  • AlloyTouch实现下拉刷新 - 【当耐特】

    AlloyTouch实现下拉刷新 - 【当耐特】

    2017-01-10 13:01

  • iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果 - mufc-go

    iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果 -

    2017-01-01 10:02

网友点评
>