Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

这个插件也能做好多好多的事，比如上拉下拉加载数据，轮播，等一切和运动有关的特效。

具体看我的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 {width: 160px;overflow: hidden;border: 1px solid rgb(204, 204, 204);margin: 0 auto;text-indent: 10px;}.main ul {list-style: none;width: 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实例idOmiTouch.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: 反馈触摸的domvar 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')];    // 找到要运动的domvar 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,//反馈触摸的domvertical: dom.getAttribute('vertical') === 'false' ? false : true,//不必需，默认是true代表监听竖直方向touchtarget: target, //运动的对象property: dom.getAttribute('property') || "translateY",  //被运动的属性min:  getNum('min', dom), //不必需,运动属性的最小值max:  getNum('max', dom), //不必需,滚动属性的最大值sensitivity: getNum('sensitivity', dom) ,//不必需,触摸区域的灵敏度，默认值为1，可以为负数factor: getNum('factor', dom) ,//不必需,表示触摸位移与被运动属性映射关系，默认值是1step: 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:很喜欢的一个插件，或者一个库吧，后期，我会加上一个轮播的封装，只要继承，初始化，简单的配置一下样式，就可复用的轮播，基于这个插件。

转载于:https://www.cnblogs.com/sorrowx/p/6763057.html

Omi框架学习之旅 - 插件机制之omi-touch 及原理说明相关推荐

Omi框架学习之旅 - 插件机制之omi-finger 及原理说明
以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...
Omi框架学习之旅 - Hello World 及原理说明
学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...
Omi框架学习之旅 - 生命周期及原理说明
生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理实例化 installed 安装完 ...
Omi框架学习之旅 - 通过对象实例来实现组件通讯及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
滴滴Booster移动APP质量优化框架学习之旅三
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅一 Android 模块Api化演练不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅二对重复资源 ...
Application应用框架思考(三) 之[插件机制]
Application应用框架思考(三) 之[插件机制] /// <summary> /// 单例类 /// //为子功能提供主框架信息接口类 /// </summary> ...
滴滴Booster移动APP质量优化框架学习之旅二
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅一 Android 模块Api化演练不一样视角的Glide剖析(一) 续写滴滴Booster移动APP质量优化框架学习之旅,上篇文章分 ...
AD学习之旅（4）— 新建芯片类原理图库器件
AD学习之旅(4)- 新建芯片类原理图库器件一.前言本文参考: [Altium500问]第006问 IC类器件的元件模型如何创建? [Altium500问]第007问原理图库中如何使用封装向导快 ...
【安卓Framework学习】Wifi框架学习之热点评分机制
系列文章目录 [安卓Framework学习]Wifi框架学习之核心类 [安卓Framework学习]Wifi框架学习之wifi状态机 [安卓Framework学习]Wifi框架学习之连接与断开流程 [ ...

Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

Omi框架学习之旅 - 插件机制之omi-touch 及原理说明相关推荐

最新文章

热门文章