Question

我正在尝试构建一个Cordova / PhoneGap应用程序，其中包含“Pull Up”选项以使用ajax调用加载动态内容。远程调用运行正常，动态内容作为子元素添加到标记。我使用iScroll4插件作为“拉”选项工作正常。

ListView中的初始内容根据需要设置样式。但它没有为动态内容设计风格。

当我尝试下面的事情时。第一个给出了一些jquery错误。

$('#scroller').trigger('pagecreate');
$("#blogList").listview("refresh");

我无法提供小提琴，因为问题使用了phonegap事件。

正文内容：

<div data-role="page" id="home">
     <div data-role="content">
         <div id="wrapper">
             <div id="scroller">
                 <ul id="blogList" data-role="listview"></ul>
                 <div id="pullUp">
                     <span class="pullUpIcon"></span><span class="pullUpLabel"></span>
                  </div>
              </div>
         </div>
     </div>
</div>

我正在使用DOMContentLoaded事件的deviceready事件作为PhoneGap应用程序。

JS代码：

    <script type="text/javascript" charset="utf-8">
        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            doBootstrap();   // Bootstraps
            getBlogList();   // Initial content loading
            loaded();
        }

        var myScroll, pullUpEl, pullUpOffset, generatedCount = 0;

        function pullUpAction() {
            $("#blogList").append('<li><a href="#">Generated row ' + (++generatedCount) + '</a></li>');
            myScroll.refresh();
        }

        function loaded() {
            pullUpEl = document.getElementById('pullUp');
            pullUpOffset = pullUpEl.offsetHeight;

            myScroll = new iScroll('wrapper', {
                useTransition: true,
                topOffset: pullUpOffset,
                onRefresh: function() {
                    if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                    }
                },
                onScrollMove: function() {
                    if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'flip';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Release to refresh...';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
                        this.maxScrollY = pullUpOffset;
                    }
                },
                onScrollEnd: function() {
                    if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '';
                        pullUpAction();
                    }
                }
            });

            document.getElementById('wrapper').style.left = '0';

        }

        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);

        document.addEventListener('DOMContentLoaded', function() {
        }, false);
    </script>

Answer 1

   $("#blogList").append('<li><a href="#">Generated row ' + (++generatedCount) + '</a></li>');
   $("#blogList").trigger('create');
   $('#blogList').listview('refresh');

动态内容未在带有iScroll的jQuery Mobile ListView中设置样式

1 个答案: