Question

我正在使用适用于Android的cordova 3.0开发移动应用。我在包装器div中有一个元素列表：

<div id='list_wrapper'>
    <ul class="table-view">
        <li id="listItem1"> 
        </li>
        <li id="listItem2">
        </li>
    </ul>
    <!-- ... -- >
</div>

现在我想在用户向左拖动时向左移动此list_wrapper，以便用另一个元素更改视图，以便创建幻灯片效果。

我正在谈论这样的事情： enter image description here

此时我只是在滑动时成功完成了它并不是我想要的，因为在滑动时视图会在块中全部更改。这就是我所做的：

var hammer_options = {
    drag_block_horizontal: true,
    dragLockToAxis: true,
    preventDefault: true
};
var hammertime = $('#list_wrapper').hammer(hammer_options);

var leftSwipeHandler = function() {
    console.log("swipeleft");
    // ...
};
var rightSwipeHandler = function() {
    console.log("swiperight");
    // ...
};
hammertime.on("swipeleft", leftSwipeHandler);
hammertime.on("swiperight", rightSwipeHandler);

此外，我不太喜欢这种滑动解决方案，因为滑动对我来说效果不佳（我测试了在Chrome上运行我的应用程序并使用我的应用程序进行模拟）。

有什么建议吗？感谢

Answer 1

尝试这样的代码：

hammer = new Hammer(backgroundElement)
hammer.on('panright panleft', function(event){

console.log(event.deltaX);

backgroundElement.style.transform = 'translateX(' + event.deltaX + 'px)';

});

我建议您不要使用jQuery，因为她会让您的应用在移动浏览器中慢慢运行，尝试使用更好的工具，尤其是在动画元素时。永远不要使用左侧或顶部移动元素，使用变换！：）

Answer 2

也许你会看看这个示例网站：http://m.v-s-b.de/de/

底部的新闻会有平移/滑动效果。

我正在使用hammerJS 2和jquery 1.10

我的灵感来自http://www.sitepoint.com/jquery-plugin-for-touch-swiping-part-1-of-2/

我的代码如下：

$(document).on("pagecreate", function () {

            var news = $('#target div.news');
            var t = $('#target');
            var lastLeft = 0;
            var i = 0;
            var b = true;
            var j = 0;


            $('#target').hammer({domEvents: false}).on("panleft panright panend", function(e){
                console.log(lastLeft);

                if(b === false){
                    return;
                }else if(lastLeft == 0 && e.type == 'panright'){
                    //$(this).parent().css('border-left-color', '#BB131D');
                    return;
                }else if(Math.abs(lastLeft)+100 >= (news.width()/t.width())*100 && e.type == 'panleft'){
                    return;
                }

                var w = Math.abs(t.width());
                var absolut = Math.abs(e.gesture.deltaX);
                var p = (absolut/w)*100;

                switch(e.type) {
                    case "panleft":
                        news.css('left', (-(p) + lastLeft) +'%');
                        break;

                    case "panright":
                        news.css('left', (p + lastLeft) +'%');
                        break;
                }


                if(p > 30){
                    b = false;

                    $(this).data('hammer').stop(true);

                    switch(e.type) {
                        case "panleft":
                            i++;
                            break;

                        case "panright":
                            i--;
                            break;
                    }
                    news.animate({left: -i*100+'%'}, 400, function(){
                        b = true;
                        lastLeft = (parseFloat(news.css('left'))/w)*100;
                    });

                }else if(e.type == 'panend'){
                    news.animate({left: lastLeft+'%'}, 200);
                }

            });
        });

Hammer.js - 向右或向左滑动/拖动时缓慢滑动元素（旋转木马效果）

2 个答案: