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

具体看我的allowTouch这篇博客，掌握了其用法，在来看它是怎么和omi结合的。就会很简单。

当然使用起来也比较方便。

老规矩，先看demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>omi-touch</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. </head>
  8. <body>
  9.     <script src="../src/omi_soda.js"></script>
  10.     <script>
  11.  
  12.         Omi.OmiTouch.init();
  13.  
  14.         class App extends Omi.Component {
  15.             constructor (data) {
  16.                 super(data);
  17.             }
  18.  
  19.             style() {
  20.                 return `
  21.  
  22.                     .main {
  23.                         width: 160px;
  24.                         overflow: hidden;
  25.                         border: 1px solid rgb(204, 204, 204);
  26.                         margin: 0 auto;
  27.                         text-indent: 10px;
  28.                     }
  29.  
  30.                     .main ul {
  31.                         list-style: none;
  32.                         width: 100%;
  33.                         margin: 0;
  34.                         padding: 0;
  35.                         text-align: left;
  36.                         font-size: 14px;
  37.                     }
  38.  
  39.                     .main li {
  40.                         padding: 0 10px;
  41.                         height: 40px;
  42.                         line-height: 40px;
  43.                         border-bottom: 1px solid #ccc;
  44.                         border-top: 1px solid #fff;
  45.                         background-color: #fafafa;
  46.                         font-size: 14px;
  47.                     }
  48.  
  49.                     .touchArea {
  50.                        height: 250px;
  51.                        overflow: hidden;
  52.                     }
  53.                 `;
  54.             }
  55.  
  56.             touchStart() {
  57.                 this.touch.min = this.refs.touchArea.offsetHeight - this.refs.scroller.offsetHeight;
  58.             }
  59.  
  60.             pressMove(evt, prop) {
  61.                 console.log(evt);
  62.                 console.log(prop);
  63.             }
  64.  
  65.             render() {
  66.                 return `
  67.                     <div class="main">
  68.                         <div class="touchArea" ref="touchArea" omi-touch touchInstance="touch" motionRef="scroller" min="0", max="0", touchStart="touchStart" pressMove="pressMove">
  69.                             <ul ref="scroller">
  70.                                 <li>Hello, Omi-Touch!</li>
  71.                                 <li>AlloyTouch</li>
  72.                                 <li>Transformjs</li>
  73.                                 <li>AlloyFinger</li>
  74.                                 <li>Omi</li>
  75.                                 <li>AlloyGameEngine</li>
  76.                                 <li>Rosin</li>
  77.                                 <li>LivePool</li>
  78.                                 <li>AlloyStick</li>
  79.                                 <li>CodeStar</li>
  80.                                 <li>AlloyDesigner</li>
  81.                                 <li>JX</li>
  82.                                 <li>TEditor</li>
  83.                                 <li>JXAnimate</li>
  84.                                 <li>Spirit</li>
  85.                                 <li>AlloyImage</li>
  86.                                 <li>ModJS</li>
  87.                                 <li>Pretty row 16</li>
  88.                                 <li>stepify</li>
  89.                                 <li>AlloyTimer</li>
  90.                                 <li>Alloy Desktop</li>
  91.                                 <li>JX UI</li>
  92.                                 <li>CodeTank</li>
  93.                                 <li>iSpriter</li>
  94.                                 <li>Rythem</li>
  95.                                 <li>Go!Png </li>
  96.                                 <li> row 1</li>
  97.                                 <li> row 2</li>
  98.                                 <li> row 3</li>
  99.                                 <li>row 5</li>
  100.                                 <li> row 5</li>
  101.                                 <li> row 7</li>
  102.                                 <li> row 8</li>
  103.                                 <li> row 9</li>
  104.                                 <li> row 11</li>
  105.                                 <li> row 11</li>
  106.                                 <li> row 12</li>
  107.                                 <li> row 13</li>
  108.                                 <li> row 14</li>
  109.                                 <li> row 15</li>
  110.                                 <li> row 16</li>
  111.                                 <li> row 17</li>
  112.                                 <li> row 18</li>
  113.                                 <li> row 19</li>
  114.                                 <li> row 20</li>
  115.                                 <li> row 21</li>
  116.                                 <li> row 22</li>
  117.                                 <li> row 23</li>
  118.                                 <li> row 24</li>
  119.                             </ul>
  120.                         </div>
  121.                     </div>
  122.                 `;
  123.             }
  124.         };
  125.         Omi.render(new App(), 'body');
  126.     </script>
  127. </body>
  128. </html>

看下结果，其实就是上下滚动很多内容。

看看具体怎么实现的，怎么把alloyTouch和Omi结合的(插件源码有所改动, 因为我需要实例化的alloytouch实例，所以加了些代码，

可以在dom上直接加上touchInstancs="自定义实例名"，不写的话，默认会自动touchInstance+id自增，该实例对象会挂在到组件实例下去的)，看源码即可，走你

  1. (function () {
  2.  
  3.         var OmiTouch = {};    // OmiTouch集合对象
  4.         var AlloyTouch = Omi.AlloyTouch;
  5.         var Transform = Omi.Transform;
  6.  
  7.         var noop = function() { };    // 空函数
  8.         OmiTouch._instanceId = 0;    // touch实例id
  9.         OmiTouch.getInstanceId = function () {
  10.             return OmiTouch._instanceId ++;    // 自增
  11.         };
  12.  
  13.         // 获取绑定的函数
  14.         var getHandler = function(name, dom, instance) {    // name: 属性值, dom: 反馈触摸的dom, instance实例
  15.             var value = dom.getAttribute(name);    // 获取属性值
  16.             if (value === null) {    // 没有函数就绑定noop空函数
  17.                 return noop;
  18.             }else{
  19.                 return instance[value].bind(instance);    // 否则返回一个新函数
  20.             }
  21.         };
  22.  
  23.         // 获取数值
  24.         var getNum = function(name, dom){    // name: 属性值, dom: 反馈触摸的dom
  25.             var value = dom.getAttribute(name);    // 获取属性值
  26.             if (value) {
  27.                 return parseFloat(value);    // 把字符串转成数字返回
  28.             };
  29.         }
  30.  
  31.         OmiTouch.init = function(){
  32.             Omi.extendPlugin('omi-touch',function(dom, instance){
  33.                 var target = instance.refs[dom.getAttribute('motionRef')];    // 找到要运动的dom
  34.                 var touchInstanceName = dom.getAttribute('touchInstance') || 'touchInstance' + OmiTouch.getInstanceId();    // 获取touch实例名, 默认touchInstance+id 自增
  35.                 Transform(target, target.getAttribute('perspective') ? false : true);    // 不在运动对象上写perspective属性,默认不要透视(perspective="true/false" 则开启透视,只有不写才关闭)
  36.                 var initialValue = dom.getAttribute('initialValue');    // 初始值
  37.                 if (initialValue) {
  38.                     target[dom.getAttribute('property') || "translateY"] = parseInt(initialValue);    // 默认有初始值,是上下滑动
  39.                 };
  40.  
  41.                 instance[touchInstanceName] = new AlloyTouch({
  42.                     touch: dom,//反馈触摸的dom
  43.                     vertical: dom.getAttribute('vertical') === 'false' ? false : true,//不必需，默认是true代表监听竖直方向touch
  44.                     target: target, //运动的对象
  45.                     property: dom.getAttribute('property') || "translateY",  //被运动的属性
  46.                     min:  getNum('min', dom), //不必需,运动属性的最小值
  47.                     max:  getNum('max', dom), //不必需,滚动属性的最大值
  48.                     sensitivity: getNum('sensitivity', dom) ,//不必需,触摸区域的灵敏度，默认值为1，可以为负数
  49.                     factor: getNum('factor', dom) ,//不必需,表示触摸位移与被运动属性映射关系，默认值是1
  50.                     step: getNum('step', dom),//用于校正到step的整数倍
  51.                     bindSelf: dom.getAttribute('bindSelf') === 'true' ? true : false,
  52.                     touchStart: getHandler('touchStart', dom, instance),
  53.                     change: getHandler('change', dom, instance),
  54.                     touchMove: getHandler('touchMove', dom, instance),
  55.                     touchEnd: getHandler('touchEnd', dom, instance),
  56.                     tap: getHandler('tap', dom, instance),
  57.                     pressMove: getHandler('pressMove', dom, instance),
  58.                     animationEnd: getHandler('animationEnd', dom, instance)
  59.                 });
  60.             });
  61.         }
  62.  
  63.         OmiTouch.destroy = function() {    // 从Omi的插件集合移除该插件
  64.             delete Omi.plugins['omi-touch'];
  65.         };
  66.  
  67.         Omi.OmiTouch = OmiTouch;
  68.     })();

恩恩，touch就这么和omi结合起来了，便有了omi-touch插件。

ps:很喜欢的一个插件，或者一个库吧，后期，我会加上一个轮播的封装，只要继承，初始化，简单的配置一下样式，就可复用的轮播，基于这个插件。

Omi框架学习之旅 - 插件机制之omi-touch 及原理说明的更多相关文章

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

    以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...

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

    先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做 ...

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

    给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很 ...

  4. Omi框架学习之旅 - 之开篇扯蛋

    说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好 ...

  5. Omi框架学习之旅 - Hello World 及原理说明

    学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...

  6. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  7. Omi框架学习之旅 - 生命周期 及原理说明

    生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...

  8. Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明

    这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello ...

  9. Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明

    组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...

随机推荐

  1. JS性能优化 之 文档片段 createDocumentFragment

    我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和 appendChild() .其中 innerHTML 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的 ...

  2. 安卓开发_浅谈ListView之分页列表

    前言: 在开发的过程中,有时候我们需要从网络解析一些数据,比如最近的一些新闻,我们需要把这些数据用ListView显示出来. 因为是解析一个网络数据源,这样将会一下子将所有的数据解析出来,当数据源数据 ...

  3. SEIG Modbus 3.4 CVE-2013-0662 漏洞分析与利用

    前言 Schneider Electric Modbus Serial Driver 会监听 27700 端口,程序在处理客户端发送的数据时会导致栈溢出. 测试环境: windows xp sp3 相 ...

  4. Android Studio 通过一个登录功能介绍SQLite数据库的使用

    前言: SQLite简介:是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在 ...

  5. Dbvisualizer软件设置SQL语句的自动提示功能

    之前从来没有使用过Dbvisualizer软件,用起来之后发现比mysqlfront不是好一点.之前一直不知道sql语句的自动提示功能,只能一个个单词输入,而且不是默认设置.之后在网上找到了怎么设置, ...

  6. 怎样让引用类库的类在HelpPage上显示Description

        最近在做 web api 开发的时候遇到这样的问题,即 HelpPage 里只能显示 api 控制器上的注释,对于那些引用了外部类库的类(比如POST提交需要用到的类),就无法显示它们的备注, ...

  7. V4L2 driver -整体架构

    我的uvc开源地址:gitee-uvc 字符设备驱动程序核心:V4L2本身就是一个字符设备,具有字符设备所有的特性,暴露接口给用户空间. V4L2 驱动核心:主要是构建一个内核中标准视频设备驱动的框架 ...

  8. pandas的resample重采样

    Pandas中的resample,重新采样,是对原样本重新处理的一个方法,是一个对常规时间序列数据重新采样和频率转换的便捷的方法. 降采样:高频数据到低频数据 升采样:低频数据到高频数据 主要函数:r ...

  9. 初识SpringCloud微服务

    微服务是一种架构方式,最终肯定需要技术架构去实施. 微服务的实现方式很多,但是最火的莫过于Spring Cloud了.为什么? 后台硬:作为Spring家族的一员,有整个Spring全家桶靠山,背景十 ...

  10. [方法提炼] 获取Android设备序列号方法

    通过这个方法可以检测设备是否连接成功,如果有一台或者多台设备,可以将所有设备序列号全部输出 # -*- coding:utf-8 -*- import os def attachDeviceList( ...