这个插件也能做好多好多的事，比如上拉下拉加载数据，轮播，等一切和运动有关的特效。
具体看我的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:很喜欢的一个插件，或者一个库吧，后期，我会加上一个轮播的封装，只要继承，初始化，简单的配置一下样式，就可复用的轮播，基于这个插件。