-1

私のiscrollオブジェクトは下にスワイプしませんが、Android携帯で下にスワイプしようとすると下にある程度の距離があります。次のようなHTMLテンプレート：

 /*The HTML template code like this:*/
 <div class="content">
    <div class="scroller">
       <div class="div1">
       </div>
    </div>
 </div>

 /*The javascript code like this:*/
 $.get(url, function(html){
                _this.$('.div1').html(html);
                _this.$('.div1').css('display','inline-block');
                var width=_this.$('.div1').width()||'400px';
                var height=_this.$('.div1').height()||'900px';
                //height+=210;
                if(width<=400)width=400;
                _this.$('.div1').css('width',width);
                _this.$('.div1').css('height',height);
                _this.$('.scroller').css('width',width);
                _this.$('.scroller').css('height',height);
                if(html.indexOf('errorpage')<=0)
                    _this.$('.div1').addClass('padding-all-4px');
                setTimeout(function () {
                    _this.scroll = new iScroll(_this.$('.content')[0],{
                        hScroll: true,
                        vScroll: true,
                        lockDirection: false,
                        zoom: true,
                        zoomMin: 0.5,
                        zoomMax: 4,
                        doubleTapZoom: 2
                    });
                }, 0);
            });
4

1 に答える 1

2

iScroll を使用するには 2 つの方法があります。iScrollのjScrollラッパーを使用するか、純粋なiScrollを使用できます。iScroll をアタッチするコンテナーに対して iScroll が適切に機能するには、いくつかの条件を満たす必要があります。

  1. コンテナは相対位置または絶対位置を持つ必要があります
  2. コンテナーには、高さ(vScroll が必要な場合) と幅(hScroll が必要な場合) が必要です。
  3. コンテナのオーバーフローは非表示にする必要があります (これはプラグイン自体によって処理されています)
  4. 子コンテナの高さを設定する必要はありません。子コンテナの高さはその内容に依存する必要があります

このようなことを試してください。

HTML テンプレート コードは次のようになります。

<div class="content">
    <div id="scroller_content">
       <div class="dynamic-content">
         <!-- you contents should be here -->
       </div>
    </div>
 </div>

次のようなJavaScriptコード：

var scrollContent = new iScroll('scroller_content', {
    /* other options goes here */
  }
});

コンテンツを子コンテナに動的にロードする場合は、コンテンツをロードした後に iScroll オブジェクトを更新するだけです。

scrollContent.refresh();

iScroll 内で iScroll を使用したい場合は、次のようにしてください。

2 つの iScroll を有効にするとします。そしてchild_container要素はあなたのparent_containerの中にあります。それで、

var parentScroller, childScroller, childScrollerTimeout;

parentScroller = new iScroll('parent_container',{
  /* other options goes here */
});

childScroller = new iScroll('child_container',{
  /* other options goes here */
  onBeforeScrollStart : function(e){
    clearTimeout(childScrollerTimeout);
    parentScroller.disable();
  },
  onScrollEnd:function(){
    childScrollerTimeout = setTimeout(function(){
     parentScroller.enable()},500);
    /* it is required to use timeout. If not second time onBeforeScroll will not work as expected */
  }
});

わからないことがあれば教えてください。さらにデモンストレーションします。ここで間違いを犯した場合は、お詫び申し上げます。これが少なくとも少し役立つことを願っています.. :)

于 2013-03-04T10:12:01.073 に答える