Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
生活随笔
收集整理的這篇文章主要介紹了
Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這個(gè)插件也能做好多好多的事，比如上拉下拉加載數(shù)據(jù)，輪播，等一切和運(yùn)動有關(guān)的特效。
具體看我的allowTouch這篇博客，掌握了其用法，在來看它是怎么和omi結(jié)合的。就會很簡單。
當(dāng)然使用起來也比較方便。
老規(guī)矩，先看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>看下結(jié)果，其實(shí)就是上下滾動很多內(nèi)容。
?
看看具體怎么實(shí)現(xiàn)的，怎么把a(bǔ)lloyTouch和Omi結(jié)合的(插件源碼有所改動, 因?yàn)槲倚枰獙?shí)例化的alloytouch實(shí)例，所以加了些代碼，
可以在dom上直接加上touchInstancs="自定義實(shí)例名"，不寫的話，默認(rèn)會自動touchInstance+id自增，該實(shí)例對象會掛在到組件實(shí)例下去的)，看源碼即可，走你
(function () {var OmiTouch = {}; // OmiTouch集合對象var AlloyTouch = Omi.AlloyTouch;var Transform = Omi.Transform;var noop = function() { }; // 空函數(shù)OmiTouch._instanceId = 0; // touch實(shí)例idOmiTouch.getInstanceId = function () {return OmiTouch._instanceId ++; // 自增 };// 獲取綁定的函數(shù)var getHandler = function(name, dom, instance) { // name: 屬性值, dom: 反饋觸摸的dom, instance實(shí)例var value = dom.getAttribute(name); // 獲取屬性值if (value === null) { // 沒有函數(shù)就綁定noop空函數(shù)return noop;}else{return instance[value].bind(instance); // 否則返回一個(gè)新函數(shù) }};// 獲取數(shù)值var getNum = function(name, dom){ // name: 屬性值, dom: 反饋觸摸的domvar value = dom.getAttribute(name); // 獲取屬性值if (value) {return parseFloat(value); // 把字符串轉(zhuǎn)成數(shù)字返回 };}OmiTouch.init = function(){Omi.extendPlugin('omi-touch',function(dom, instance){var target = instance.refs[dom.getAttribute('motionRef')]; // 找到要運(yùn)動的domvar touchInstanceName = dom.getAttribute('touchInstance') || 'touchInstance' + OmiTouch.getInstanceId(); // 獲取touch實(shí)例名, 默認(rèn)touchInstance+id 自增Transform(target, target.getAttribute('perspective') ? false : true); // 不在運(yùn)動對象上寫perspective屬性,默認(rèn)不要透視(perspective="true/false" 則開啟透視,只有不寫才關(guān)閉)var initialValue = dom.getAttribute('initialValue'); // 初始值if (initialValue) {target[dom.getAttribute('property') || "translateY"] = parseInt(initialValue); // 默認(rèn)有初始值,是上下滑動 };instance[touchInstanceName] = new AlloyTouch({touch: dom,//反饋觸摸的domvertical: dom.getAttribute('vertical') === 'false' ? false : true,//不必需，默認(rèn)是true代表監(jiān)聽豎直方向touchtarget: target, //運(yùn)動的對象property: dom.getAttribute('property') || "translateY", //被運(yùn)動的屬性min: getNum('min', dom), //不必需,運(yùn)動屬性的最小值max: getNum('max', dom), //不必需,滾動屬性的最大值sensitivity: getNum('sensitivity', dom) ,//不必需,觸摸區(qū)域的靈敏度，默認(rèn)值為1，可以為負(fù)數(shù)factor: getNum('factor', dom) ,//不必需,表示觸摸位移與被運(yùn)動屬性映射關(guān)系，默認(rèn)值是1step: getNum('step', dom),//用于校正到step的整數(shù)倍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結(jié)合起來了，便有了omi-touch插件。
?
ps:很喜歡的一個(gè)插件，或者一個(gè)庫吧，后期，我會加上一個(gè)輪播的封裝，只要繼承，初始化，簡單的配置一下樣式，就可復(fù)用的輪播，基于這個(gè)插件。
?
轉(zhuǎn)載于:https://www.cnblogs.com/sorrowx/p/6763057.html
總結(jié)
以上是生活随笔為你收集整理的Omi框架学习之旅 - 插件机制之omi-touch 及原理说明的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 常见目录与区别
- 下一篇： NFS、SSH、SAMBA