很多情况下,产品希望统一安卓和 IOS select 交互和样式。但是众所周知,IOS 和安卓的 select 唤起的选择界面并不是样的,甚至 IOS 不同系统版本以及安卓不同系统版本下的 select 唤起的界面也不是相同的。而且省市区多选的需求,不管是 IOS 和安卓都没有提供原生界面的支持。所以唯一的办法就是 web 去模拟 select 唤起界面。
如上图所以,中间的区域是支持触摸运动。什么触摸运动?AlloyTouch 不就是专门干这个的吗!
但是需要停在某个日期上!什么需要停在某个日期上?AlloyTouch 不是可以配置 step 的吗!
所有问题迎刃而解~
先引用依赖的 JS 和 CSS 文件。
- <link rel="stylesheet" href="select.css" />
- <script src="../../transformjs/transform.js">
- </script>
- <script src="../../alloy_touch.js">
- </script>
- <script src="../../alloy_touch.select.js">
- </script>
然后:
- new AlloyTouch.Select({
- options: [{
- value: "all",
- text: "累计"
- },
- {
- value: "2015-9",
- text: "2015年9月"
- },
- {
- value: "2015-8",
- text: "2015年8月"
- },
- {
- value: "2015-7",
- text: "2015年7月"
- },
- {
- value: "2015-6",
- text: "2015年6月"
- },
- {
- value: "2015-5",
- text: "2015年5月"
- },
- {
- value: "2015-4",
- text: "2015年4月"
- },
- {
- value: "2015-3",
- text: "2015年3月"
- },
- {
- value: "2015-2",
- text: "2015年2月"
- },
- {
- value: "2015-1",
- text: "2015年1月"
- },
- {
- value: "2014-12",
- text: "2014年12月"
- },
- {
- value: "2014-11",
- text: "2014年11月"
- },
- {
- value: "2014-10",
- text: "2014年10月"
- }],
- selectedIndex: 3,
- change: function(item, index) {},
- complete: function(item, index) {}
- })
- Transform(scroll);
- new AlloyTouch({
- touch: container,
- target: scroll,
- initialValue: selectedIndex * -1 * step,
- property: "translateY",
- min: (len - 1) * -30,
- max: 0,
- step: step
- });
通过上面的配置,scroll 最终都会被校正到 step 的整数倍,小于 min 会回弹,大于 max 也会回弹。
可以看到,AlloyTouch 很擅长处理触摸运动。当然上面只是一个简单的例子,这仅仅是一个开始!
后续还会给大家带来:
你要触摸的一切都在这里。
来源: http://www.cnblogs.com/iamzhanglei/p/6477370.html