Question

我正在使用apache cordova 2.2

      jquery 1.7.2
      jquery mobile 1.4.3
      iscroll 5 (Matteo Spinelli ~ http://cubiq.org/)

我有以下index.html：

<div data-role="page" id="id1">
    <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" id="id2">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

<div data-role="page" id="thisshouldscroll">
    <div data-role="header" data-position="fixed">
    <div id="buttondiv" data-role="navbar">
                    some buttons
    </div>
    </div>
    <div data-role="content" id="id4">
        <!-- need scrollable list here -->
        <div id="wrapper" >
          <div id="scroller">

          </div>
        </div>        
    </div>
    <div data-role="footer" data-position="fixed">
       <div id="bottombuttondiv" data-role="navbar">
           some buttons
       </div>
    </div>
</div>

<div data-role="page" id="id5">
    <div data-role="header" data-position="fixed">
    </div>
    <div data-role="content" id="id6">
    </div>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

我按如下方式显示可滚动页面id =“thisshouldscroll”：

$.mobile.changePage( "#thisshouldscroll", { transition: "slideup"} );  
buildScrollingData();
myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    scrollbars: true
});

在其他地方我定义了：

function displayScrollingData(){
     var contentToAppend="";

     //loop web service data add certain data to contentToAppend with
         contentToAppend = contentToAppend +
                          str1 + "<BR>" +
                          str2 + "<BR>" +
                          str4 + "<BR>" +
                          str3 + "<BR><BR>";

     $("#scroller").append(contentToAppend);

}

function buildScrollingData(){
      //call a web service, put results in an array
      dispayScrollingData()
}

我也有：

function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
}

数据不滚动，我想知道我的初始化是否以某种方式搞砸了。

page id =“thisshouldscroll”在我的应用中显示第二位。

有没有人知道在第二页应该具有滚动功能时初始化iScroll 5的正确顺序？

如果初始化正常，有人可以建议我缺少什么吗？

Answer 1

对于Iscroll 5我有它以下面的方式设置。如果你喜欢多页面上的滚动，那么给myscroll和包装器一个唯一的页面名称。 Document Ready用于测试目的，因此在页面初始化时使用所需的JQM过程。另外请注意，因为包装器具有顶部和底部像素<div data-role="content" ...实际上不需要使scroler运行。

 var myScroll;

 $(document).ready(function(){ 

        myScroll = new IScroll('#wrapper',
                        {
                            scrollX: false, 
                            scrollY: true
                            ,click:true // open click event
                            ,scrollbars: false 
                            ,useTransform: true
                            ,useTransition: false
                            ,probeType:3,
                            mouseWheel:true,
                            bindToWrapper: true
        });

});


 function initscroll() {

    setTimeout(function () {
            myScroll.refresh();
        }, 1000);
    }

在Pageshow上或在将数据显示在列表之后刷新滚动

initscroll()

我还使用以下HTML并将数据附加到ID（listview）

<div data-role="content" id="main" class="custom_content">
    <div id="wrapper" class="wrapper">
       <div id="scroller">
             <ul data-role="listview" id="listview">
             </ul>
        </div>
      </div>
</div>

演示忽略“Iscroll Plugging”中的长句代码，向下滚动直至看到//// JQM STUFF

http://jsfiddle.net/z50cg1jf/

2014年11月更新 - 针对Android网页浏览测试（Kitkat，使用Webchrome）API 19

如果您在Android手机或平板电脑上遇到滚动性能不佳，请移除

probeType：3

并将过渡设置为true

useTransition：true

还可以在Android webview App上启用硬件加速。

Iscroll 5现在应该飞。我花了好几个小时试图改进webview上的Iscroll性能，并且我偶然尝试了上述内容。

当第二页应该可滚动时，iScroll 5不工作

1 个答案: