当第二页可滚动时，iScroll 5无法正常工作 [英] iScroll 5 not working when 2nd page should be scrollable

问题描述

我正在使用Apache Cordova 2.2

I'm using apache cordova 2.2

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

我有以下index.html:

I have the following 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"，如下所示:

I display the scrollable page id="thisshouldscroll" as follows:

$.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);
}

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

The data is not scrolling and I'm wondering if my initialization is screwed up somehow.

page id ="thisshouldscroll"在我的应用程序中显示为2.

page id="thisshouldscroll" is displayed 2nd in my app.

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

Does anyone know the proper order to initialize iScroll 5 when its the 2nd page that should have the scrolling capabilities?

如果初始化可以，那么任何人都可以建议我所缺少的内容吗?

If the initialization is ok, can anyone suggest what I'm missing?

推荐答案

对于Iscroll 5，我按照以下方式进行设置.如果您喜欢在多个页面上滚动，则为myscroll和包装器指定页面的唯一名称.准备好文档用于测试目的，因此在Page初始化时使用必需的JQM流程.还要注意，因为包装器具有顶部和底部像素<div data-role="content" ...才能真正使scroler发挥作用.

For Iscroll 5 i have it Set up in the following Manner. If you like the scroll on Multiple pages then give myscroll and wrapper a unique name for the page. Document Ready is for testing Purposes so use required JQM process upon Page initialization. Also as note, because wrapper has Top and Bottom pixels <div data-role="content" ... is not actually needed to get the scroler functioning.

 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);
    }

根据需要在页面显示"或将数据追加到列表之后"刷新滚动条

initscroll()

我还使用以下HTML并将数据附加到ID(列表视图)

<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

Demo Ignore the long code in the fiddle that's the Iscroll Plugging, scroll down till you see //// JQM STUFF

http://jsfiddle.net/z50cg1jf/

更新2014年11月-适用于Android Webviews (已在(使用Webchrome的)Kitkat)API 19上进行了测试

Update Nov 2014 -- for Android Webviews tested on (Kitkat, using Webchrome) API 19

如果在Android手机或平板电脑上滚动效果不佳

If you are experiencing bad scroll performance on an Android phone or tablet remove

probeType:3

并将过渡设置为true

and set transition to true

useTransition:正确

还要在Android Webview应用程序上启用硬件加速.

Also enable Hardware Acceleration on your Android webview App.

Iscroll 5现在应该飞行了.我花了几个小时试图提高Webview上Iscroll的性能，但偶然地我尝试了上面的方法.

Iscroll 5 should now fly. I spent hours trying to improve the Iscroll performance on webview and by chance i tried the above.

这篇关于当第二页可滚动时，iScroll 5无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！