jQuery移动端滑动仅限于内容翻页。

Question

jQuery移动端滑动仅限于内容翻页。

4

我使用jquery mobile ui制作了一个页面，可以左右滑动，但是这对我来说不起作用，因为我只想滑动内容，而不是整个页面，我尝试使用data-role="content"，但它不再起作用，只有使用data-role="page"才能实现滑动动画，但只针对内容，是否可能实现？

我有一些<article>，我想将它们向左/右滑动...但我不想滑动标题和其他内容...只想滑动中间的部分。

如果可能，还要禁用那个愚蠢的jquery mobile主题。

//Le

代码结构

<header data-role="header"> .... </header>
 <section>
  <!-- only this part I want to swipe, one article at a time -->
  <article data-role="page"> .....  </article>
  <article data-role="page"> .....  </article>
  <article data-role="page"> .....  </article>
  <article data-role="page"> .....  </article>
  <!-- only this part I want to swipe, one article at a time -->
</section>
<footer> ... </footer>

  $('article').bind("swipeleft", function(){
    var nextpage = $(this).next('article[data-role="page"]');
    // swipe using id of next page if exists
    if (nextpage.length > 0) {
      $.mobile.changePage(nextpage, {transition: "slide",
    reverse: false}, true, true);
    }

  });

  $('article').bind("swiperight", function(){
    var prevpage = $(this).prev('article[data-role="page"]');
    if (prevpage.length > 0) {
    $.mobile.changePage(prevpage, {transition: "slide",
    reverse: true}, true, true);
    }

  });

- Uffo

请同时发布代码。 - Shail

2个回答

1

另一种方法是将固定的页眉/页脚固定在其位置，然后滑动内容只会移动页面。

HTML：

<body>

<div id="site-header"> My fixed-position header </div>

<div data-role="page" id="pageone">
    ...
    <a href="#pagetwo" data-transition="slide">Slide to Page Two</a>
    ...
</div> 

<div data-role="page" id="pagetwo">
    ...
    <a href="#pageone">Go to Page One</a>
    ...
</div>

</body>

CSS：

#site-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
}

另请参阅：http://www.artandlogic.com/blog/2013/11/jquery-mobile-transitions-static-vs-dynamic-content-part-ii/

- uriel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gajotres · Accepted Answer

你可以在这里作弊，有一种方法可以在jQM中更改页面，但使其看起来好像只是内容被更改了。如果在每个标题和页脚中放置一个data-id="footer"属性，则可以实现此操作。

我为您创建了一个可工作的jsFiddle示例：http://jsfiddle.net/Gajotres/NV6Py/

<!DOCTYPE html>
<html>
<head>
  <title>Share QR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>     
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />   
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>

  <article data-role="page" id="article1">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 1</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Footer</h1>    
    </div>
  </article>

  <article data-role="page" id="article2">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 2</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Footer</h1>
    </div>
  </article>

  <article data-role="page" id="article3">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 3</p>
    </div>
    <div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Footer</h1>
    </div>
  </article>

</body>
</html>

如果您想防止jQM页面样式化，可以通过data-enhance="false"属性进行操作，该属性必须放置在页面/文章容器中，并初始化为：

<script>
    $(document).on('mobileinit', function () {
        $.mobile.ignoreContentEnabled = true;
    });
</script>

还要记住，mobileinit事件必须在加载jQM js之前初始化。

我也有一个工作示例：http://jsfiddle.net/Gajotres/5gXKj/，这是一个与顶部示例相同但没有使用jQM页面标记增强的示例。