8

私はPhonegapが初めてです。リストビューでデータのリストを表示しています。データはサーバーから収集され、ビューにスクロール バーを追加したいと考えています。Phonegap にスクロール バーを追加して、ビューのスクロールを固定するにはどうすればよいですか? それを滑らかにするジョー？これを行うように私を導いてください。

前もって感謝します。

4

2 に答える 2

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:absolute と組み合わせることができます...

また、 touchScroll 関数をいじることもできます。自動スクロールなどでイージングやスワイプ検出を追加することもできますが、これはもう少し高度な問題です...

于 2012-12-09T21:59:36.297 に答える
-1

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 */;
}

このサンプルデモを確認してください

于 2012-09-10T08:43:11.820 に答える