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这个方法(默认是空 ...
随机推荐
- Oracle 11g数据库详细安装过程
1.Oracle 11g下载 官方网址为:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.h ...
- Related concepts of testing
根据是否知道源代码测试可以分为黑盒和白盒. 黑盒:功能测试. 白盒:知道源代码,要写测试代码. 根据测试的粒度. 方法测试: 单元测试: 集成测试: 系统测试: 根据测试的暴力程度. 压力测试:谷歌工 ...
- SpringMVC处理请求
HttpServletBean HttpServletBean主要参与了创建工作,并没有涉及请求的处理. FrameworkServlet FrameworkServlet的service方法里添加了 ...
- C#语言————第一章 第一个C#程序
第一章 第一个C#程序 ******************C#程序*************** ①:建立项目:文件-->新建-->项目-->c#-->控制台程 ...
- shell脚本之颜色效果显示以及PS1颜色实战
在bash shell脚本中我们可以使用ASCII颜色来显示文本信息. 格式:\033\[31m hello \033[0m ##m: 左侧#:这个#可以是3或者4,作用不一样. 3:前景色 4:背景 ...
- 学生与部门管理app-产品功能与界面的简单设计
学生与部门管理app-产品功能与界面的简单设计 1. 结对成员学号 我:********* 大佬:*******10 2. 需求分析(NABCD模型) 2.1 N-需求 各个部门在开学初占据学校青春广 ...
- Beta冲刺！ Day5 - 砍柴
Beta冲刺! Day5 - 砍柴 今日已完成 晨瑶:陪全队肝到最后一刻 昭锡:更改了主页UI 永盛:剩余的接口改动和新增 立强:文章增加缩略图预览,收藏功能第三方编辑器整合. 炜鸿:继续完成站内信功 ...
- Mysql连接错误：Mysql Host is blocked because of many connection errors
环境:linux,mysql5.5.31错误:Host is blocked because of many connection errors; unblock with 'mysqladmin f ...
- swift class的动态派发
一.测试代码 class BaseCallClass{ func NormalCall(){} @objc func OcCall(){} @objc dynamic func OcDynamicCa ...
- swift面向协议编程
https://www.technotification.com/2018/08/protocol-oriented-programming-swift.html https://www.toptal ...