Question

我有一个简单的jQuery Mobile示例，包含2个页面和listviews。我试图找出绑定iScroll的最佳方法。请在下面查看我的笔。目前我已经收录了iScroll，但我不确定如何正确绑定和刷新

HTML：

<div id="first" data-role="page">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
      <h1>iScroll-ify Me Please!</h1>
    </div>

    <div role="main">

        <div id="scroll-wrap">
            <ul id="my-list" data-role="listview"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">

        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="gear"></a></li>
                <li><a href="#" data-icon="home"></a></li>
            </ul>
        </div>
    </div>
</div>

<div id="second" data-role="page">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">

              <a href="#first" data-role="button" data-icon="arrow-l" data-iconpos="notext">Home</a>

      <h1>Scroll Me <span id="id"></span></h1>
    </div>

    <div role="main">

        <div id="scroll-wrap2">
            <ul id="my-list2" data-role="listview"></ul>
        </div>
    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">

        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="check"></a></li>
                <li><a href="#" data-icon="star"></a></li>
            </ul>
        </div>
    </div>
</div>

JS：

$(function () {

    $.mobile.paramsHandler.addPage('second', ['id'], null, secondLoad);
    $.mobile.paramsHandler.init();
});

$(document).on('pageinit', '#first', function() {

    // simulate an AJAX call
  setTimeout(function() {

    var text = '';
    var list = $('#my-list').empty();
    for (i = 0; i < 100; i++) { 
      text += '<li><a href="#second?id='+i+'">data loaded from AJAX '+i+'</a></li>';
        }

    list.append(text).listview('refresh');

  }, 1000);
});

function secondLoad(parms) {

  $('#id').text(parms.id);

  // simulate a long AJAX call
  setTimeout(function() {

    var text = '';
    for (i = 0; i < 100; i++) { 
        text += '<li><a href="#"><img src="http://images.nike.com/is/image/DotCom/THN_PS/Nike-Strike-Football-SC2140_144_A.jpg?fmt=jpg&qty=85&wid=620&hei=620"><h2>data loaded from AJAX '+parms.id+'</h2></a></li>';
        }

    $('#my-list2').empty().append(text).listview('refresh');
  }, 2500);
}

function initScroll(elmId) {

    var $this = $(elmId);

    $this.css('position', 'absolute')
      .css('overflow', 'hidden')
      .css('top', '0')
      .css('bottom', '0')
      .css('left', '0')
      .css('width', '100%');

    return new IScroll($this.get(0), {
        eventPassthrough: false,
        scrollX: false,
        scrollY: true,
        preventDefault: false,
        scrollbars: true,
        mouseWheel: true,
        interactiveScrollbars: true,
        shrinkScrollbars: 'clip',
        useTransition: false,
        bindToWrapper: true,
        bounceEasing: 'elastic',
        bounceTime: 1200,
        probeType: 3, // watch the scroller
        fadeScrollbars: false
    });
}

Answer 1

在追加列表项并刷新列表视图后立即：

list.append(text).listview('refresh'); 
var page1Scroll = initScroll("#scroll-wrap");

和

$('#my-list2').empty().append(text).listview('refresh');
var page2Scroll = initScroll("#scroll-wrap2");

更新了 PEN

jQuery Mobile iScroll5 Bind

1 个答案: