时间戳

首页 > 解决方案 > 如何在 jQuery Mobile 中定义不可滑动的区域？

jquery-mobile - 如何在 jQuery Mobile 中定义不可滑动的区域？

问题描述

截屏 我只想为绿色标记的区域激活“向右滑动”功能。我可以定义一个不可滑动的区域吗？

标签： jquery-mobile

解决方案

有不止一种可能的解决方案来实现你所要求的。

和swipe是自定义swipeleftjQuery swiperightMobile 事件。JQM 为这些事件附加了一个自定义结构，其中包含原始触摸事件的开始和停止坐标。

首先，如果你想自己处理滑动，你需要告诉框架：

跳过内置面板滑动处理程序：

<div data-role="panel" id="myPanel" data-swipe-close="false">

之后，要打开或关闭panel，您可以简单地检查 的坐标touchstart，touchend或同时检查两者（由您决定）。

触摸事件的自定义处理：

$('body').on('swiperight', function (e) {
  var startX = e.swipestart.coords[0],
    stopX = e.swipestop.coords[0];   
  if(startX < 100) {
    $('#myPanel').panel('open');
  } 
});

$('body').on('swipeleft', function (e) {
  var startX = e.swipestart.coords[0],
    stopX = e.swipestop.coords[0];   
  if(stopX < 100) {    
    $('#myPanel').panel('close');
  } 
});

如果您想要更系统的方法，您还可以检查一些相关panel选项：

var data = $('#myPanel').data("mobile-panel"),
    display = data.options.display, /* Panel Type: reveal, push, overlay */
    position = data.options.position; /* Panel position: left, right */

并相应地微调滑动动作（或任何你想要的）。

推荐阅读