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

 

posted @ 2017-04-25 16:59  Sorrow.X  阅读(348)  评论(0)  编辑  收藏  举报