[英]Dynamic content not styled in jQuery Mobile ListView with iScroll
[英]iScroll + jQuery Mobile -> Dynamic Listview Scrolling Position Issue
我有一個動態更新的列表視圖。 我已經從JSON服務中獲取數據,進行了解析並動態地注入了div。 問題是; 生成所有數據后,滾動正常但不能完全滾動。 想象一下,您按下並向上滾動列表視圖,如果您從屏幕上移開了時針,列表視圖位置會自動轉回其起始位置。 我用硬編碼的<ul><li>
代碼嘗試了iScroll和jQuery mobile,然后它起作用了。
這是下面的代碼:
<script>
var myScroll2;
function loaded() {
myScroll2 = new iScroll('wrapper2');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
..
<div id="wrapper2">
<div data-role="content">
<div id="panoListDetay"></div>
</div>
</div>
---和下面的代碼是生成用於listview的數據。
/*automatically upldated script*/
/*called every 5 second*/
<script>
$(function update_twit(){
$.ajax({
url: "http://myweepage.org/service.json?q=getlast10data",
dataType: 'jsonp',
success: function(json_results){
$("#notice_div").html('');
$("#panoListDetay").html('');
$('#panoListDetay').append('<ul id="tweetul" data-role="listview" data-theme="c"></ul>');
listItems = $('#panoListDetay').find('ul');
$.each(json_results.results, function(key) {
html = '<h3>'+json_results.results[key].screen_name+'</h3><div class="ui-li-desc">'+json_results.results[key].text+'</div>';
html += '<p class="ui-li-aside"><img WIDTH=12 HEIGHT=12 src="images/11-clock.png"/><strong> '+json_results.results[key].tarih.substring(11,16)+'</strong></p>';
html +='<p class="ui-li"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>';
listItems.append('<li>'+html+'</li>');
});
$('#panoListDetay ul').listview();
window.setTimeout(update_twit, 5000);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
window.setTimeout(update_twit, 20000);
}
});
})
</script>
大家好,我解決了這個問題。 問題與div = content的樣式有關。
<div id="wrapper2">
<!--<div data-role="content">-->
<div id="panoListDetay"></div>
<!--</div>-->
</div>
// Append the HTML to your element inside your myScroll
setTimeout(function () {
myScroll.refresh();
}, 100);
使用data-role =“ content”沒問題
附加數據后,您應該刷新iscroll
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.