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实例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:很喜欢的一个插件，或者一个库吧，后期，我会加上一个轮播的封装，只要继承，初始化，简单的配置一下样式，就可复用的轮播，基于这个插件。
Omi框架学习之旅 - 插件机制之omi-touch 及原理说明的更多相关文章
- Omi框架学习之旅 - 插件机制之omi-finger 及原理说明
以前那篇我写的alloyfinger源码解读那篇帖子,就说过这是一个很好用的手势库,hammer能做的,他都能做到, 而且源码只有350来行代码,很容易看懂. 那么怎么把这么好的库作为omi库的一个插 ...
- Omi框架学习之旅 - 插件机制之omi-router及原理说明
先来看看官网的介绍吧:https://github.com/AlloyTeam/omi/tree/master/plugins/omi-router 其实我推荐直接看官网的介绍.我所写的,主要给个人做 ...
- Omi框架学习之旅 - 插件机制之omi-transform及原理说明
给omi-transform插件做个笔记,使用起来也很爽. transform.js这个库,一直想写一篇帖子的,可是,数学不好,三维矩阵和二位矩阵理解的不好,所以迟迟没写了, 这也是一个神库,反正我很 ...
- Omi框架学习之旅 - 之开篇扯蛋
说实话, 我也不知道Omi是干啥的, 只因此框架是alloyTeam出的, dntzhang写的, 也有其他腾讯大神参与了, 还有一些其他贡献者, 以上我也不太清楚, 当我胡说八嘎. 因其写法有人说好 ...
- Omi框架学习之旅 - Hello World 及原理说明
学什么东西都从hello world开始, 我也不知道为啥. 恩,先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. hello world - demo: class Hello e ...
- Omi框架学习之旅 - 获取DOM节点 及原理说明
虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...
- Omi框架学习之旅 - 生命周期 及原理说明
生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...
- Omi框架学习之旅 - 通过omi-id来实现组件通讯 及原理说明
这个demo是通过omi-id来获取子类的实例,然后更改data属性,之后updata一下就好了. 老规矩:先上demo代码, 然后提出问题, 之后解答问题, 最后源码说明. class Hello ...
- Omi框架学习之旅 - 通过对象实例来实现组件通讯 及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
随机推荐
- ORM&MySQL
概念: ORM:对象关系映射 , 全拼 Object-Relation Mapping ,是一种为了解决面向对象与关系数据库存在的互不匹配现象的技术.主要实现模型对象到关系型数据库数据的映射.比如:把 ...
- python之if循环
if 条件: if语句块else: 语句块 money = int(input("请输入你兜里的钱:")) if money > 500: print("吃肉&qu ...
- Sql Server 向上取整、向下取整、四舍五入取整
==================================================== [四舍五入取整截取] select round(55.56,0) ============== ...
- Flutter 相机定制
Flutter中与硬件相关的部分,一直都挺蛋疼的.方案基本上有两种,自己写,或者等出相关的库. 最近做的一个项目中,需要对相机做定制.有过相关模块开发经验的,就知道这种需求并不简单,况且是这种跨平台解 ...
- [20170828]grep过滤技巧.txt
[20170828]grep过滤技巧.txt --//经常使用grep过滤显示信息. # ps -ef |grep oraagentoracle 13416 1 0 2016 ? ...
- 洗礼灵魂，修炼python（16）--列表进阶话题—>上节作业讲解+copy模块，浅拷贝，深拷贝
上节课后作业: 1.使用列表解析输出结果:[(0,0),(0,2),(2,0),(2,2)] 方法1: 方法2: 方法3: 2.使用列表生成器打印斐波那契数列 3.使用列表解析生成列表[1x2,3x4 ...
- selenium+python自动化笔记之一
一.webdriver的API与定位元素 元素定位核心部分 元素名称 webdriver API 说明 id find_element_by_id() id定位 name find_element_b ...
- iris数据集(.csv .txt)免费下载
我看CSDN下载的iris数据集都需要币,我愿意免费共享,希望下载后的朋友们给我留个言 分享iris数据集(供学习使用): 链接: https://pan.baidu.com/s/1Knsp7zn-C ...
- Java JDK1.5、1.6、1.7新特性整理
转载请注明出处:http://www.cnblogs.com/tony-yang-flutter 一.Java JDK1.5的新特性 1.泛型: List<String> strs = n ...
- 有效的括号golang实现
给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. 注意空字符串可被认 ...