Question

我是Phonegap的新手。我在列表视图中显示数据列表。数据是从服务器收集的，我想在视图中添加滚动条。如何在Phonegap中添加滚动条并使视图滚动粘性？如何让它顺利？请指导我这样做。

提前致谢。

Answer 1

我个人不喜欢iscroll ..使用它有很多问题所以我发现了另一个解决方案......你可以试试这个：

1。）将DIV溢出设置为自动（或滚动）并设置其高度..例如

    <div id="wrapper" style="overflow:auto; height: 200px">...content...</div>

（我通常根据用户的屏幕尺寸用javascript计算高度..我从来没有为所有设备设置固定的高度，这只是为了这个“演示”的目的）

2。）添加此javascript：

<script>
function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

function touchScroll(id){
    if(isTouchDevice()){ //if touch events exist...
        var el=document.getElementById(id);
        var scrollStartPos=0;

        document.getElementById(id).addEventListener("touchstart", function(event) {
            scrollStartPos=this.scrollTop+event.touches[0].pageY;
            event.preventDefault();
        },false);

        document.getElementById(id).addEventListener("touchmove", function(event) {
            this.scrollTop=scrollStartPos-event.touches[0].pageY;
            event.preventDefault();
        },false);
}
} 
</script>

3.。）在页面加载时调用它..如果你使用jQuery：

$(document).ready(function() { 
   touchScroll("wrapper");
});

4.。）如果您希望滚动条可见，只需定义以下CSS规则：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #000;
}

这已经过测试，并且应该在任何Android（甚至更旧型号）或iOS设备上工作完全相同（也可以在没有此解决方法的情况下工作 - 但这种解决方法不会破坏它）。你可以将它与position：fixed或position：包装元素的绝对值结合起来......

你也可以使用touchScroll功能，你可以添加一些缓动甚至刷卡检测与自动滚动等，但这是一个更高级的问题......

Answer 2

使用iscroll。

步骤

function loaded() {
  document.addEventListener('touchmove', function(e){ e.preventDefault(); });
  myScroll = new iScroll('scroller');
}
document.addEventListener('DOMContentLoaded', loaded);`

<div id="wrapper">
<div id="scroller">
    <ul>
        <li>...</li>
    </ul> 
</div>

#wrapper还需要一些类：

#wrapper {
  position:relative;
  z-index:1;
  width:/* your desired width, auto and 100% are fine */;
  height:/* element height */;
  overflow:/* hidden|auto|scroll */;
}

请查看此示例demo

Phonegap中的滚动条？

2 个答案: