iScroll + jQuery Mobile -> 动态列表视图滚动位置问题答案

【问题标题】：iScroll + jQuery Mobile -> Dynamic Listview Scrolling Position IssueiScroll + jQuery Mobile -> 动态列表视图滚动位置问题
【发布时间】：2012-01-29 10:35:20
【问题描述】：

我有一个动态更新的列表视图。我从我的 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>

---下面的代码是为列表视图生成数据。

    /*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>

【问题讨论】：

您好，我已经修好了。像
请为您的问题添加一个答案，并尽可能将其标记为正确，这样每个人都会知道该问题已被回答:)

标签： jquery jquery-mobile cordova iscroll4 iscroll

【解决方案1】：

大家好，我解决了这个问题。问题与 div=content 的样式有关。

 <div id="wrapper2"> 
<!--<div data-role="content">-->  
<div id="panoListDetay"></div>
<!--</div>-->
</div>

【讨论】：

【解决方案2】：

// Append the HTML to your element inside your myScroll
setTimeout(function () {
       myScroll.refresh();
   }, 100);

使用data-role="content"没有问题

你应该在添加数据后刷新你的 iscroll

【讨论】：