1

我有一个用cordova实现的移动应用程序。

我已经使用 JQuery、JQuery Mobile、Iscroll 和 Iscrollview 使一页上的 div 可滚动。

这是可滚动潜水的 html:

<div data-role="page" align="center" id="index">

    <div data-role="header" style=""><h1 style="">Index page</h1></div>

    <div data-role="content" align="left" style="" id="contentId" >

       <div id="myScrollableDiv" class="example-wrapper" data-iscroll='{"bounce":false}'>
          <ul id="myUL" style=""  data-role="listview"></ul>
       </div>

    </div>

    <div id="footer" style="" data-role="footer" >
        <button style="" id="footerOkButton" type="button" >OK</button>
    </div>    
</div>

现在我想添加标签。我希望可滚动的 div 位于第一个选项卡上。

所以我重组了我的 html,现在当我只希望 myScrollableDiv 中的内容滚动时,整个页面都会滚动:

<div data-role="tabs" id="tabs" style="display:none;">
      <div data-role="navbar">
        <ul>
           <li><a href="#tabs-1">Tab 1</a></li>
           <li><a href="#tabs-2">Tab 2</a></li>
           <li><a href="#tabs-3">Tab 3</a></li>
        </ul>
      </div>

      <div align="center" id="index" class="ui-content">
         A text area: <textarea id="myTextArea"></textarea></br>
         Some text<br>
        <div data-role="content" align="left" style="" id="contentId" >

           <div id="myScrollableDiv" class="example-wrapper" data-iscroll='{"bounce":false}'>
            <ul id="myUL" style=""  data-role="listview">
            </ul>
           </div>

        </div>
      </div>

      <div id="tabs-2" class="ui-content">
         <p>tab 2</p>
      </div>

      <div id="tabs-3" class="ui-content">
         <p>tab 3</p>
      </div>
 </div>

有没有人成功地将 JQuery Mobile 选项卡与 IScroll/IScrollView 结合在一起?

如果您面临这个问题,您将如何找出问题所在?

4

0 回答 0