这个插件也能做好多好多的事，比如上拉下拉加载数据，轮播，等一切和运动有关的特效。
具体看我的allowTouch这篇博客，掌握了其用法，在来看它是怎么和omi结合的。就会很简单。
当然使用起来也比较方便。
老规矩，先看demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>omi-touch</title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> </head> <body> <script src="../src/omi_soda.js"></script> <script> Omi.OmiTouch.init(); class App extends Omi.Component { constructor (data) { super(data); } style() { return ` .main { 160px; overflow: hidden; border: 1px solid rgb(204, 204, 204); margin: 0 auto; text-indent: 10px; } .main ul { list-style: none; 100%; margin: 0; padding: 0; text-align: left; font-size: 14px; } .main li { padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; background-color: #fafafa; font-size: 14px; } .touchArea { height: 250px; overflow: hidden; } `; } touchStart() { this.touch.min = this.refs.touchArea.offsetHeight - this.refs.scroller.offsetHeight; } pressMove(evt, prop) { console.log(evt); console.log(prop); } render() { return ` <div class="main"> <div class="touchArea" ref="touchArea" omi-touch touchInstance="touch" motionRef="scroller" min="0", max="0", touchStart="touchStart" pressMove="pressMove"> <ul ref="scroller"> <li>Hello, Omi-Touch!</li> <li>AlloyTouch</li> <li>Transformjs</li> <li>AlloyFinger</li> <li>Omi</li> <li>AlloyGameEngine</li> <li>Rosin</li> <li>LivePool</li> <li>AlloyStick</li> <li>CodeStar</li> <li>AlloyDesigner</li> <li>JX</li> <li>TEditor</li> <li>JXAnimate</li> <li>Spirit</li> <li>AlloyImage</li> <li>ModJS</li> <li>Pretty row 16</li> <li>stepify</li> <li>AlloyTimer</li> <li>Alloy Desktop</li> <li>JX UI</li> <li>CodeTank</li> <li>iSpriter</li> <li>Rythem</li> <li>Go!Png </li> <li> row 1</li> <li> row 2</li> <li> row 3</li> <li>row 5</li> <li> row 5</li> <li> row 7</li> <li> row 8</li> <li> row 9</li> <li> row 11</li> <li> row 11</li> <li> row 12</li> <li> row 13</li> <li> row 14</li> <li> row 15</li> <li> row 16</li> <li> row 17</li> <li> row 18</li> <li> row 19</li> <li> row 20</li> <li> row 21</li> <li> row 22</li> <li> row 23</li> <li> row 24</li> </ul> </div> </div> `; } }; Omi.render(new App(), 'body'); </script> </body> </html>
看下结果，其实就是上下滚动很多内容。
看看具体怎么实现的，怎么把alloyTouch和Omi结合的(插件源码有所改动, 因为我需要实例化的alloytouch实例，所以加了些代码，
可以在dom上直接加上touchInstancs="自定义实例名"，不写的话，默认会自动touchInstance+id自增，该实例对象会挂在到组件实例下去的)，看源码即可，走你
(function () { var OmiTouch = {}; // OmiTouch集合对象 var AlloyTouch = Omi.AlloyTouch; var Transform = Omi.Transform; var noop = function() { }; // 空函数 OmiTouch._instanceId = 0; // touch实例id OmiTouch.getInstanceId = function () { return OmiTouch._instanceId ++; // 自增 }; // 获取绑定的函数 var getHandler = function(name, dom, instance) { // name: 属性值, dom: 反馈触摸的dom, instance实例 var value = dom.getAttribute(name); // 获取属性值 if (value === null) { // 没有函数就绑定noop空函数 return noop; }else{ return instance[value].bind(instance); // 否则返回一个新函数 } }; // 获取数值 var getNum = function(name, dom){ // name: 属性值, dom: 反馈触摸的dom var value = dom.getAttribute(name); // 获取属性值 if (value) { return parseFloat(value); // 把字符串转成数字返回 }; } OmiTouch.init = function(){ Omi.extendPlugin('omi-touch',function(dom, instance){ var target = instance.refs[dom.getAttribute('motionRef')]; // 找到要运动的dom var touchInstanceName = dom.getAttribute('touchInstance') || 'touchInstance' + OmiTouch.getInstanceId(); // 获取touch实例名, 默认touchInstance+id 自增 Transform(target, target.getAttribute('perspective') ? false : true); // 不在运动对象上写perspective属性,默认不要透视(perspective="true/false" 则开启透视,只有不写才关闭) var initialValue = dom.getAttribute('initialValue'); // 初始值 if (initialValue) { target[dom.getAttribute('property') || "translateY"] = parseInt(initialValue); // 默认有初始值,是上下滑动 }; instance[touchInstanceName] = new AlloyTouch({ touch: dom,//反馈触摸的dom vertical: dom.getAttribute('vertical') === 'false' ? false : true,//不必需，默认是true代表监听竖直方向touch target: target, //运动的对象 property: dom.getAttribute('property') || "translateY", //被运动的属性 min: getNum('min', dom), //不必需,运动属性的最小值 max: getNum('max', dom), //不必需,滚动属性的最大值 sensitivity: getNum('sensitivity', dom) ,//不必需,触摸区域的灵敏度，默认值为1，可以为负数 factor: getNum('factor', dom) ,//不必需,表示触摸位移与被运动属性映射关系，默认值是1 step: getNum('step', dom),//用于校正到step的整数倍 bindSelf: dom.getAttribute('bindSelf') === 'true' ? true : false, touchStart: getHandler('touchStart', dom, instance), change: getHandler('change', dom, instance), touchMove: getHandler('touchMove', dom, instance), touchEnd: getHandler('touchEnd', dom, instance), tap: getHandler('tap', dom, instance), pressMove: getHandler('pressMove', dom, instance), animationEnd: getHandler('animationEnd', dom, instance) }); }); } OmiTouch.destroy = function() { // 从Omi的插件集合移除该插件 delete Omi.plugins['omi-touch']; }; Omi.OmiTouch = OmiTouch; })();
恩恩，touch就这么和omi结合起来了，便有了omi-touch插件。
ps:很喜欢的一个插件，或者一个库吧，后期，我会加上一个轮播的封装，只要继承，初始化，简单的配置一下样式，就可复用的轮播，基于这个插件。