添加jquery移动滑动事件

Posted 2023-05-09

【中文标题】添加jquery移动滑动事件

【英文标题】：Adding jquery mobile swipe event

【发布时间】：2011-11-09 17:30:30

【问题描述】：

我有一个列表视图，我想做的是在链接上添加一个滑动事件。例如，如果用户滑动第一个链接，它会转到该页面。这对 listview 元素是否可行。我试过 div,href,a,li,ul 但仍然没有警报。它适用于身体。谢谢

<div>
  <ul data-role="listview" data-inset="true">
   <li class="rqstpage"><a href="./requests.php">Requests</a></li>
   <li><a href="./speakers.php" data-transition="pop">Control Panel</a></li>
   <li><a href="./schedule.html">Schedule</a></li>
   <li><a href="./information.html">Information</a></li>
  </ul>
</div>


<script>
$("div ul li.rqstpage").bind('swipe',function(event, ui)
  $.mobile.changePage("requests.php", "slide");
);
</script>

【问题讨论】：

+1 我将尝试使用滑动手势创建照片库

【参考方案1】：

现场示例：

http://jsfiddle.net/yxzZf/4/

JS：

$("#listitem").swiperight(function() 
    $.mobile.changePage("#page1");
);

HTML：

<div data-role="page" id="home"> 
    <div data-role="content">
        <p>
            <ul data-role="listview" data-inset="true" data-theme="c">
                <li id="listitem">Swipe Right to view Page 1</li>
            </ul>
        </p>
    </div>
</div>

<div data-role="page" id="page1"> 
    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c">
            <li data-role="list-divider">Navigation</li> 
            <li><a href="#home">Back to the Home Page</a></li>
        </ul>

        <p>
            Yeah!<br />You Swiped Right to view Page 1
        </p>
    </div>
</div>

相关：

Adding JQM swipe event to listview link

【讨论】：

Phil 不可能有一个 以便它保留它的格式和布局。通过删除锚标记，格式，文本变得混乱。谢谢

@bollo 你有没有想过如何将它发送到一个新的 URL 而不是 DIV？

【参考方案2】：

您是否尝试过使用live() 进行绑定？

更新：.live() 将被弃用，正确的用法是.on()

它将处理程序附加到所有当前匹配元素的事件以及以后可能匹配的那些。

pageCreate() 
  $(parent).on('swipe', 'li.rqstpage', function() 
     $.mobile.changePage("requests.php", "slide");
  

您是否考虑过将此库用于gestures？

【参考方案3】：

如果直接绑定到控件上是否有效，如下：

pageCreate() 
  $("li.rqstpage").swipe() 
     $.mobile.changePage("requests.php", "slide");
  

【参考方案4】：

如果您希望页面以用户滑动的自然方向滑动，那么可以这样做：

// For a left swipe: page slides from right to left
$('#listitem').on('swipeleft', function() 
    $.mobile.changePage('#page-to-left',  transition: slide);
);

// For a right swipe: page slides from left to right (add "reverse: true")
$('#listitem').on('swiperight', function() 
    $.mobile.changePage('#page-to-right',  transition: slide, reverse: true);
);

【参考方案5】：

如果你想要过渡，你需要指定你也想要过渡，例如

$.mobile.changePage('#page1',  transition: 'flip' );