滚动自定义div在Android上的jQuery Mobile中不起作用

Question

在我的应用程序中，我有一个搜索引擎，它返回结果列表。 每次用户单击指向该结果的链接时，单个结果页面就会填充数据。 在此页面上，还存在用于切换当前可见内容的按钮。 问题在于应用程序的这一部分失去了滚动功能。 我已经检查了“ scrollstart”事件的调用，但没有一个被调用。 我正在使用最新的Phonegap和jQuery Mobile。 在模拟器上的Android 2.1和ZTE Blade上进行测试。

编码：

<!DOCTYPE html> 
<html> 
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />       
        <title>Search</title> 
        <link rel="stylesheet" href="jquery.mobile-1.0a3.min.css"/>
        <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.js"></script>
        <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
        <script type="text/javascript" src="jquery.mobile.min.js"></script>
        <style type="text/css">            
            p {
                font-size: 11px;
            }

            .centered {
                text-align:center;
            }

            .search-detail {        
            }

            .header {
                height:42px;
            }

            .ui-li-thumb {
                height: 92px;
                max-height: 92px;
                max-width: 90px;
            }

            #single-top h4 {
                margin-top:5px;
                margin-bottom:5px;
            }

            .guziki .ui-btn {
                margin-left:0;
            }

            #single-data {
                margin-top:10px;
            }
                #single-data h4 {
                    margin-top:5px;
                    margin-bottom:5px;
                }
                #single-data h6 {
                    margin: 0;
                }        
        </style>       
    </head> 
<body> 

<!-- Start of first page -->
<div data-role="page" id="menu">
    <div data-role="header" data-position="fixed" class="header" id="my-header">        
    </div>
    <div data-role="content">   
        <ul data-role="listview" role=listbox"" data-theme="c">
            <li><a href="#page-5" class="single" data-transition="pop" name="0">Go !</a></li>
        </ul>
    </div>
    <div data-role="footer">
        footer
    </div>
</div>

<!-- Start of fifth page -->
<div data-role="page" id="page-5" data-theme="a">
    <div data-role="header" data-position="fixed" class="header" data-id="myheader">
        <h1></h1>
    </div>
    <div data-role="content" class="single-content">
    </div>
    <div data-role="footer">
        footer
    </div>
</div>

<script type="text/javascript">
    var searchObjects = [],
    id;

    var fixgeometry = function(){
        scroll(0, 0);

        var header = $("div[data-role='header']:visible");
        var footer = $("div[data-role='footer']:visible");
        var content = $("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();
        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
            content.height(content_height);
        }
    }    

    obj = {'image': 'http://www.prologis.com/images/uploads/japanese-flag-640.jpg', 'name': 'ProLogis Park', 'developer': 'ProLogis',
    'location': 'Suburbs', 'exact_location': 'New York',
    'total_area': 71115, 'free_area': 3465, 'id': 2033, 'about': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non dui mollis libero dictum eleifend.'+
    'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas' +
    'Cras quam sem, pulvinar et luctus eu, tempor non metus. Cras mollis lacinia massa sed sagittis.'};

    searchObjects.push(obj);


        $("#page-5").live('pagebeforehide', function(){
            var content = $(".single-content");
            $('.container').remove();
        });

        $("#page-5").live('pageshow', function(){
            fixgeometry();
        });

        $('.single').live('click', function(){
            id = $(this).attr('name'),
            content = $(".single-content");
            var object = searchObjects[id];

            var html = '<div class="container">'+
                            '<div id="single-top">'+
                                '<h4></h4>'+
                                '<div data-inline="true" class="guziki" data-theme="c">'+
                                    '<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="main_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">About</span></span></a>'+
                                    '<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="localization_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Localization</span></span></a>'+
                                    '<a data-role="button" href="#" class="ui-btn ui-btn-inline ui-btn-corner-all ui-btn-up-a ui-shadow" data-theme="a" data-inline="true" name="gallery_data"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Gallery</span></span></a>'+        
                                '</div>'+
                            '</div>'+
                            '<div id="single-data"></div>'+
                        '</div>';                      
            content.append(html);

            $('a[name|="main_data"]').live('click', load_main_data);
            $("a[name|='localization_data']").live('click', load_localization_data);
            $("a[name|='gallery_data']").live('click', load_gallery_data);        

            $('#single-top h4').html(object.name);
            load_main_data();
            fixgeometry();
        });

        var load_main_data = function(){
            $('#single-data').empty();
            var object = searchObjects[id];

            $('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
            $('#single-data').append('<h4>Developer:</h4>');
            $('#single-data').append('<h6>'+ object.developer +'</h6>');            
            $('#single-data').append('<h4>About:</h4>');
            $('#single-data').append('<p>'+ object.about +'< br/><br /></p>');
            $('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');
            $('#single-data').append('<img src="'+ object.image +'" alt="'+ object.name +'" />');                                 
        }

        var load_localization_data = function(id){
            $('#single-data').empty();
            var object = searchObjects[id];

            $('#single-data').append('<h4>Localization:</h4>');
        }

        var load_gallery_data = function(id){
            $('#single-data').empty();
            var object = searchObjects[id];

            $('#single-data').append('<h4>Gallery:</h4>');
        }
</script>
</body>
</html>

顺便说一句，有人知道为什么这个程序这么慢吗？ 我在编译过程中做错了什么吗（我正在使用phonegap网站上的教程，不是所有使用的功能都已从清单中删除）？

Answer 1

我看到您正在手动为按钮添加类，因此jqm可能无法正确处理您的页面。 也许尝试通过将链接的href设置为“＃”（返回false）来阻止自动重定向到页面，并通过调用$.mobile.changePage('yourpage');手动显示页面$.mobile.changePage('yourpage'); 我很确定您可以删除此溢出设置。

滚动自定义div在Android上的jQuery Mobile中不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-03-25 08:23:46

滚动自定义div在Android上的jQuery Mobile中不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-03-25 08:23:46

解决方案1
1 已采纳 2011-03-25 08:23:46