1

Hammer.js の使用方法。電話ギャップでアプリケーションのスワイプ ビューが必要です。**正確に--->段階的なプロセスを意味します。それに基づいて実装しようとしたものをいくつか見つけました。動作しませんでした。Hammer.js のコード

(function(Hammer) {
    /**
     * ShowTouches gesture
     * requires jQuery
     * show all touch on the screen by placing elements at there pageX and pageY
     * @param   {Boolean}   [force]
     */
    Hammer.plugins.showTouches = function(force) {
        // the circles under your fingers
        var template = '<div style="position:absolute;z-index:9999;left:0;top:0;height:14px;width:14px;border:solid 2px #777;' +
            'background:rgba(255,255,255,.7);border-radius:20px;pointer-events:none;' +
            'margin-top:-9px;margin-left:-9px;"></div>';

        // elements by identifier
        var touch_elements = {};
        var touches_index = {};

        /**
         * remove unused touch elements
         */
        function removeUnusedElements() {
            // remove unused touch elements
            for(var key in touch_elements) {
                if(touch_elements.hasOwnProperty(key) && !touches_index[key]) {
                    touch_elements[key].remove();
                    delete touch_elements[key];
                }
            }
        }

        Hammer.detection.register({
            name: 'show_touches',
            priority: 0,
            handler: function(ev, inst) {
                touches_index = {};

                // clear old elements when not using a mouse
                if(ev.pointerType != Hammer.POINTER_MOUSE && !force) {
                    removeUnusedElements();
                    return;
                }

                // place touches by index
                for(var t= 0,total_touches=ev.touches.length; t<total_touches;t++) {
                    var touch = ev.touches[t];

                    var id = touch.identifier;
                    touches_index[id] = touch;

                    // new touch element
                    if(!touch_elements[id]) {
                        touch_elements[id] = $(template).appendTo(document.body);
                    }

                    // Paul Irish says that translate is faster then left/top
                    touch_elements[id].css({
                        left: touch.pageX,
                        top: touch.pageY
                    });
                }

                removeUnusedElements();
            }
        });
    };
})(window.Hammer);

コードに準拠して実行すると、このようにエラーが発生しました

04-23 14:23:40.936: E/Web Console(740): TypeError: Result of expression 'Hammer' [undefined] is not an object. at file:///android_asset/www/hammer.js:8

と

04-23 14:23:40.936: E/Web Console(740): ReferenceError: Can't find variable: Hammer at file:///android_asset/www/range.html?var%20id=results.rows.item(1).id:35

一方、35行目で私は与えました..

var hammer = new Hammer(document.getElementById("pageWrapper"));

html

<div id="pageWrapper">
    <div class="page" >
    <h4 style="background-image:url(img/______.png); margin-bottom:80px; text-align:center;">hello</h4>
    <img src="img/______.png" style="margin-left:5px;" /><img align="middle"  />
</div>

私はエラーに直面していたので、[ここ]（https://github.com/cubiq/SwipeView/blob/master/src/swipeview.js）からSwipeView.jsで実装しようとしましたが、ループに入ります..ページコントローラーは表示されますが、以下のものが欠けています

  • ページコントローラーは水平ではなく垂直に表示されています
  • スワイプ ビューに設定された画像は表示されません。
  • ページは水平方向ではなく垂直方向に移動します

また、タッチダウンに対する WebCore の応答を待っているため、Miss a drag という WARNING が表示されます。

次のコードを追加してみました...変更はありません

document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
    function onStart ( touchEvent ) {
      if( navigator.userAgent.match(/Android/i) ) {
       touchEvent.preventDefault();
      }
    }

これに対する救済策または解決策はありますか??

4

0 に答える 0