[英]jQuery Mobile iScroll5 Bind
我有一個簡單的jQuery Mobile示例,包含2個頁面和Listviews。 我正在嘗試找出綁定iScroll的最佳方法。 請在下面簽出我的筆。 目前,我已經包含了iScroll,但是我不確定如何正確綁定和刷新
http://codepen.io/aherrick/pen/LzCFJ
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
});
}
追加列表項並刷新列表視圖后,效果如何:
list.append(text).listview('refresh');
var page1Scroll = initScroll("#scroll-wrap");
和
$('#my-list2').empty().append(text).listview('refresh');
var page2Scroll = initScroll("#scroll-wrap2");
更新的筆
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.