我正在制作一个包含jQtouch和iScroll的移动网站。
我不想用iScroll获得多个可滚动区域,但只有列表适用于iScroll ...
我试过这个:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper');
scroll2 = new iScroll('list_wrapper');
}
但没有运气。 任何人都有一个有效的解决方案吗?
我的HTML:
<div id="wrapper">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
<div id="list_wrapper">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
答案 0 :(得分:2)
我正在使用这种方法。
HTML:
<div class="carousel" id="alt-indie">
<div class="scroller">
<ul>
<li></li>
// etc
</ul>
</div>
</div>
JS:
$('.carousel').each(function (index) {
new iScroll($(this).attr('id'), { /* options */ });
});
所以“旋转木马”类的任何东西都会变成滑块。
答案 1 :(得分:0)
您的HTML似乎是正确的,
确保调用'loaded'函数。
这样的事情:
document.addEventListener('DOMContentLoaded', loaded, false);
希望有所帮助。
答案 2 :(得分:0)
var scroll1, scroll2;
$("#you_might_like_index").live("pageshow", function() {
setTimeout(function(){scroll1 = new iScroll('wrapper');}, 0);
setTimeout(function(){scroll2 = new iScroll('list_wrapper');}, 0);
});
<div data-role="page" id="you_might_like_index">
<div id="wrapper">
<div id="scroller">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
<div id="list_wrapper">
<div id="scroller">
<ul>
<li><a href="#">Test</a></li>
</ul>
</div>
</div>
</div>
答案 3 :(得分:0)
这个答案可能有点迟了......但由于我遇到了同样的问题,所以这是我的解决方案,效果很好。 注意:此解决方案需要jquery,但无论如何我都在使用它。
脚本部分:
function iscroller_init () {
var iscroller = $('.iscroller');
iscroller.each(function(index){
$(this).addClass('iscroller'+index).attr('iscroller_id','iscroller'+index);
var tmpfnc = new Function('var myScroll'+index);
tmpfnc();
var tmpfnc = new Function('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true });');
tmpfnc();
});
}
function iscroller_reinit (el) {
var el = $(el);
var iscroller = $('.iscroller');
var i = iscroller.index(el);
var tmpfnc = new Function('var myScroll'+i+' = new IScroll(\'.iscroller'+i+'\', { mouseWheel: true });');
tmpfnc();
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
$(document).ready(function(){
if ($('.iscroller').length > 0) iscroller_init ();
});
html:
<div class="scrollholder fl">
<div class="iscroller">
<div class="scroller">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
.....
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
</div>
</div>
其中父<div class="scrollholder fl">
是父div,可以定位到您想要的位置,也可以多次。
信息:班级&#34; fl&#34;在我的情况下作为"float:left;"
的css分隔符,并不对应任何iscroll函数。
第二个函数iscroller_reinit (el)
用于重新初始化指定的单个iscroller,可以在容器被ajax请求加载后触发。