Android手机应用程序中的滚动条不可见？

Question

Android手机应用程序中的滚动条不可见？

3

我是phone gap的新手。我在列表视图中显示数据。这些数据从服务器收集，我希望在视图中添加滚动条。如何在phone gap中添加滚动条并使我的视图滚动更加流畅？

我已经将iscroll添加到我的html文件中，并使用了以下代码：

<script language = "javascript" src = "../scripts/iscroll.js"></script>

我的HTML代码是：

<body onLoad="initList()">

    <div id="wrapper">
     <div id="scroller">
     </div>
    </div>

</body>

我的 JavaScript 代码如下：

function initList()
{

    var statsIds    = [];
    var array       = ["Active", "Paused"];
    $.ajax(
        {
          url       : campaignStatus,
          success   : function(data) 
          {
            var data        = JSON.parse(data);
            var count       = data.content.count;
            var res         = data.content.response;

            $.each(res, function(k, v)
            {
                statsArray.push(v.status);
                statsIds[v.status]  = v.id;
            });
          }
        });

    $.ajax(
        {
            url     : campaignlistURL,
            success : function(data) 
            {
                var data        = JSON.parse(data);
                var count       = data.content.count;
                response        = data.content.response;

                var page = '<div id="top-box"><div id="lable-box"><div class="lable-txt">Campaign List</div></div><div id="search-box"><div class="search"><div class="left"><img src="../images/search-img.png"></div><div class="middle"><input type="text" id="search" placeholder="search by Campaign Name.." onkeyup="campaignsSearch()"/></div></div></div></div>';

                page    += '<div id="empty-container"></div>';

                page    += '<div id="table-container">';                                    
                //----------------------------------
                $.each(response, function(k, v)
                {

                    page    += '<div class="table-box">';
                    page    += '<div class="top">';             
                    page    += '<div class="left"><label>Campaign Name:</label><input type="text" class="campaign" readonly="true" value='+v.name+' onClick="openCampaignDetails()" id='+v.id+'></div>';

                    var statusId    = v.status;
                    var count       = 0;
                    page    += '<div class="right"><label>Status</label>';
                    for(var i=0; i<statsArray.length; i++)
                    {
                        if(statusId == i)
                        {
                            if(statsArray[i] == "Active" || statsArray[i] == "Paused")
                            {
                                if(count == 0)
                                {
                                    page += '<select id="'+v.id+'" onchange="statusChange()">';
                                }

                                for(var j=0; j<array.length; j++)
                                {
                                    //console.log(statsIds[array[j]] + array[j]);

                                    if(array[j] == statsArray[i])
                                    {
                                        page += '<option id='+statsIds[array[j]]+' SELECTED>'+array[j]+'</option>';
                                    }

                                    else
                                    {
                                        page += '<option id='+statsIds[array[j]]+'>'+array[j]+'</option>';
                                    }

                                }
                                count++;
                            }
                            else
                            {
                                page += statsArray[i];
                            }

                        }
                    }

                    page    += '</select>';
                    page    += '</div>';
                    page    +='</div>'; //-- top -

                    //*******Table***********
                    var statistics  = v.stats;
                    if(statistics)
                    {
                        page    += '<div class="table-data"><div class="column"><div class="header">IMPS </div><div class="middle">'+statistics.sum.adjusted_views+'</div></div><div class="column"><div class="header">Clicks </div><div class="middle">'+statistics.sum.adjusted_clicks+'</div></div><div class="column"><div class="header"> Costs </div><div class="middle">'+statistics.sum.adjusted_cost+' </div></div><div class="column" style="border:0px;"><div class="header"> Leads</div><div class="middle">'+statistics.sum.adjusted_convs_0+'</div></div></div>';
                    }                   
                    page    += '</div>'; //-- table-box

                });
                page    += '</div>'; //-- table-container -

                page    += '<div id="footer"><div class="left-logo"><img src="../images/logo-2.png" width="111" height="39" onClick="reloadCampaigns()"></div><div class="right-log-out"><a href="#"><img src="../images/log-out.png" width="21" height="18" border="0" onClick="logout()"></a></div></div>';
                document.getElementById("wrapper").innerHTML = page;
                document.getElementById("table-container").style.overflow="scroll";

                var myScroll = new iScroll('wrapper',{fixedScrollbar : false,hideScrollbar:false});
                //document.addEventListener('DOMContentLoaded', loaded, false);

              //    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
                //------------------
            }
        });
}

我想我做错了一些事情，请指导我如何做。

提前致谢。

- user1651572

为什么需要“显示”滚动条？我认为在PhoneGap上处理的方式是，当用户开始滚动时，会出现位置指示，以指示他们相对于视图中的内容量所处的位置。用户可以使用手指滚动，无论是否显示滚动条，只要视图本身是可滚动的。 - Colby R Meier

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.Baba · Accepted Answer

尝试使用{{link1：nicescroller}}。

它很好，流畅，易于实现，最重要的是，它支持触摸。就像这样简单：

var nice = false;
$(document).ready(
  function() { 
    nice = $("#div").niceScroll();
   }
);

请确保您的数据具有固定的高度，如果从服务器读取数据时高度发生变化，则每次高度变化时重新初始化nicescroll。

$("#div").getNicescroll().remove().niceScroll();