Question

我在单个html中有多个页面。我有一个外部面板，可以在所有页面中轻扫（面板可以打开和关闭）。在一个页面中，我有滑动标签功能。 Panel和Swipe Tabs功能现在都很好.. 我的问题是，当我来滑动标签页，滑动标签也会拉动面板，如何调整这些滑动事件？，如何正确检测滑动标签和面板滑动事件。

这里创建了DEMO，我还需要一个面板，它也可以通过滑动事件打开和关闭。用户可以在滑动和滑动之间滑动以打开和关闭左侧面板，面板必须是外部的，因此它可以在整个页面中使用。不幸的是，小组没有在演示中工作，我不知道发生了什么，但在我的项目中工作。

Answer 1

要添加外部面板，您可以使用常规的jQuery文档：

var panel = '<div data-theme="a" data-role="panel" data-display="overlay" id="leftpanel"><ul data-role="listview"><li data-icon="false"><a data-ajax="false" href="index.html">Home</a></li><li data-icon="false"><a data-ajax="false" href="html/examples.html">Examples</a></li><li data-icon="false"><a data-ajax="false" href="html/custom/version.html">Version 1.0.1</a></li></ul></div>';

$(function () {
    $("body").prepend(panel);
    $("[data-role=panel]").panel().enhanceWithin();
});

然后你可以听内容div上的滑动来更改标签和标题div来打开/关闭面板：

$("div[data-role=content]").on("swipeleft", function (event) {
    changeNavTab(true);
});
$("div[data-role=content]").on("swiperight", function (event) {
    changeNavTab(false);
});

// Navigation  Drawer Swipe Listener
$("div[data-role=header]").on("swipeleft swiperight", function (e) {
    // save swipe direction right/left
    var dir = 'prev';
    if (e.type == 'swiperight') {
        dir = 'next';
    }
    if (dir == 'prev') {
        $('#leftpanel').panel('close');

    } else {
        $('#leftpanel').panel('open');

    }
});

更新了 FIDDLE

Jquery Mobile Panel滑动事件和标签在页面内滑动事件？

1 个答案: