[英]jQuery Mobile iScroll5 Bind
I have a simple jQuery Mobile example with 2 pages and listviews. 我有一个简单的jQuery Mobile示例,包含2个页面和Listviews。 I'm trying to figure out the best way to bind iScroll.
我正在尝试找出绑定iScroll的最佳方法。 Please checkout my pen below.
请在下面签出我的笔。 Currently I've included iScroll but I'm not sure how to properly bind and refresh
目前,我已经包含了iScroll,但是我不确定如何正确绑定和刷新
http://codepen.io/aherrick/pen/LzCFJ http://codepen.io/aherrick/pen/LzCFJ
HTML: 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: 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
});
}
How about right after appending the listitems and refreshing the listview: 追加列表项并刷新列表视图后,效果如何:
list.append(text).listview('refresh');
var page1Scroll = initScroll("#scroll-wrap");
and 和
$('#my-list2').empty().append(text).listview('refresh');
var page2Scroll = initScroll("#scroll-wrap2");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.