Question

我是手机的新手。我在列表视图中有显示数据列表。数据从服务器收集，我想要向视图添加滚动条。如何在手机间隙和我的视图中添加滚动条滚动是粘滞的。如何使它顺利。

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

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

我的html doby代码是，

<body onLoad="initList()">

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

</body>

我的java脚本代码是，

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);
                //------------------
            }
        });
}

我想我犯了一些错误请指导我这样做。

提前致谢..

Answer 1

尝试使用nicescroller

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

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

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

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

Android手机间隙中看不到滚动条？

1 个答案: