Javascript 如何在android phonegap中为动态div加载iscroll

Javascript 如何在android phonegap中为动态div加载iscroll,javascript,jquery,cordova,iscroll,Javascript,Jquery,Cordova,Iscroll,我已经在android phonegap中创建了应用程序。在我的应用程序中,我在div dynamicallyloaded中添加了列表。如何使用iscroll为动态div添加滚动条。我想使用iscroll为动态div添加滚动条。如何做到这一点 我的代码是 <div class="sidemenu" ></div> </div> Html: <div class="sidemenu" ><

我已经在android phonegap中创建了应用程序。在我的应用程序中,我在div dynamicallyloaded中添加了列表。如何使用iscroll为动态div添加滚动条。我想使用iscroll为动态div添加滚动条。如何做到这一点 我的代码是

         <div class="sidemenu" ></div>

       </div>
Html:

         <div class="sidemenu" ></div>

       </div>
脚本:

         <div class="sidemenu" ></div>

       </div>
iscroll:

         <div class="sidemenu" ></div>

       </div>
  var myScroll;
        function loaded() {
            myScroll = new iScroll('scroller', {
                useTransform: false,
                vScroll: true,
                onBeforeScrollStart: function (e) {
                    var target = e.target;
                    while (target.nodeType != 1) target = target.parentNode;

                    if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
                        e.preventDefault();
                }
            });
        }
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 0), false);


       /** scrollbar for dynamic div*/ 
    function doIscrollRefresh () {  
        setTimeout(function () {
            myScroll.refresh();
        }, 0);

    } 
动态分区: 我从localdatabase中检索了值,并动态地将其追加到div中

         <div class="sidemenu" ></div>

       </div>
function list1(alphabet)
{
              doIscrollRefresh ();
             document.addEventListener("deviceready", onDeviceReady, false);
             function onDeviceReady() 
             {

                    var db = window.openDatabase("createdb", "1.0", "PhoneGap Demo", 200000);

                    db.transaction(queryDB, errorCB,successCB);

              } 
              function queryDB(tx) 
             {
                     var a=alphabet;
                     tx.executeSql("SELECT Textvalue FROM TextValue WHERE Textvalue LIKE '" + a + "%'",[], querySuccess, errorCB);
             }

             function querySuccess(tx,results)
              {
                   $(".sidemenu").append("<li>"+"<label style='background-color:#C1CDD9' >"+alphabet+ "</label>"+"</li>");
                   for (i = 0; i < results.rows.length; i++) 
                    {
                         $(".sidemenu").append("<li>"+"<a id='"+i+"'  href='#'>" +results.rows.item(i).Textvalue +  "</a>"+ "<hr/>"+ "</li>");
                    }
                    $(".sidemenu").append("<hr/>");
               }
          function errorCB(err) 
          {
                      alert("Error processing SQL: "+err.code);
          }
          function successCB() 
          {
                 //alert("appended");   
          }
}
函数列表1(字母表)
{
dois();
文件。添加的监听器(“deviceready”,OnDeviceraddy,false);
函数ondevicerady()
{
var db=window.openDatabase(“createdb”,“1.0”,“PhoneGap演示”,200000);
db.事务(queryDB、errorCB、successCB);
} 
函数queryDB(tx)
{
var a=字母表;
tx.executeSql(“从Textvalue中选择Textvalue,其中Textvalue类似于“+a+”%”,[],querySuccess,errorCB);
}
函数查询成功(发送,结果)
{
$(“.sidemenu”).append(“
  • ”+“+”+字母表+“+”
  • ”); 对于(i=0;i”+“+”
    “+””); } $(“.sidemenu”)。追加(
    ); } 函数errorCB(err) { 警报(“处理SQL时出错:+err.code”); } 函数successCB() { //警报(“附加”); } }
    它在logcat中显示错误。错误是myScroll未定义不是对象。
    请告诉我解决方案。如何为dynamic div添加滚动条。请指导我。提前感谢您

    嗨,我不是舒尔,这将是问题所在,但如果iscroll说您的iscroll没有定义它,因为您调用了loaded();函数在开始时执行,然后再执行Dynamicque代码,这样iscroll就找不到您的元素了

             <div class="sidemenu" ></div>
    
           </div>
    
    .page {
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .header {
        position: absolute;
        top: 0;
        height: 42px;
        width: 100%;
        color: #333;
        text-shadow: 0 1px 0 white;
        border: 1px solid #F7C942;
        border-left-width: 0;
        border-right-width: 0;
        background: #FADB4E;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#FCEDA7), to(#FBEF7E));
        background-image: -webkit-linear-gradient(#FCEDA7, #FBEF7E);
        background-image: -moz-linear-gradient(#FCEDA7, #FBEF7E);
        background-image: -ms-linear-gradient(#FCEDA7, #FBEF7E);
        background-image: -o-linear-gradient(#FCEDA7, #FBEF7E);
        background-image: linear-gradient(#FCEDA7, #FBEF7E);
        z-index: 2;
    }
    
    .content {
        position: absolute;
        top: 42px;
        bottom: 66px;
        padding-left: 4%;
        padding-right: 4%;
        width: 92%;
        border-width: 0;
        overflow: hidden;
        color: #333;
        text-shadow: 0 1px 0 white;
        z-index: 1;
    }
    
    .scroller {
        position: relative;
        overflow: hidden;
        z-index: 1;
    }
    
    .footer {
        position: absolute;
        bottom: 0;
        height: 64px;
        width: 100%;
        z-index: 2;
        border: 1px solid #B3B3B3;
        border-left-width: 0;
        border-right-width: 0;
        background: #EEE;
        color: #3E3E3E;
        font-weight: bold;
        text-shadow: 0 1px 1px white;
        background-image: -webkit-linear-gradient(#F0F0F0, #DDD);
        background-image: -moz-linear-gradient(#F0F0F0, #DDD);
        background-image: -ms-linear-gradient(#F0F0F0, #DDD);
        background-image: -o-linear-gradient(#F0F0F0, #DDD);
        background-image: linear-gradient(#F0F0F0, #DDD);
    }
    
    var Page = document.createElement('div');
        $(Page).attr('id', 'City');
        $(Page).addClass('page');
    
    var Page = document.createElement('div');
        $(Page).attr('id', 'City');
        $(Page).addClass('page');
    
        //Header
        var Header = document.createElement('div');
        $(Header).addClass('header');
        $(Header).attr('align', 'center');
    
    //Content
        var Content = document.createElement('div');
        $(Content).addClass('content');
        $(Content).attr('id', 'Wrapper');
    
        //Scroller
        var Scroller = document.createElement('div');
        $(Scroller).addClass('scroller');
    
    Content.appendChild(Scroller);
    
        //Footer
        var Footer = document.createElement('div');
        $(Footer).addClass('footer');
    
        Page.appendChild(Header);
        Page.appendChild(Content);
        Page.appendChild(Footer);
    
        document.body.appendChild(Page);
    
        myScroll = new iScroll("Wrapper");
    
        setTimeout(function() {
            myScroll.refresh();
        }, 500);
    
    我建议您在显示并换行dynamique div之后回调加载的函数

             <div class="sidemenu" ></div>
    
           </div>
    
    只要回忆一下加载的();函数或使用iScroll.refresh();当您的设备已显示时,此功能将起作用

             <div class="sidemenu" ></div>
    
           </div>
    
      function querySuccess(tx,results)
              {
                   $(".sidemenu").append("<li>"+"<label style='background-color:#C1CDD9' >"+alphabet+ "</label>"+"</li>");
                   for (i = 0; i < results.rows.length; i++) 
                    {
                         $(".sidemenu").append("<li>"+"<a id='"+i+"'  href='#'>" +results.rows.item(i).Textvalue +  "</a>"+ "<hr/>"+ "</li>");
                    }
                    $(".sidemenu").append("<hr/>");  
       ********************************************************************
          loaded();
    
    /* or you can use*/
    
         myScroll.refresh();
    
     *********************************************************************
               }
    
    函数查询成功(发送,结果)
    {
    $(“.sidemenu”).append(“
  • ”+“+”+字母表+“+”
  • ”); 对于(i=0;i”+“+”
    “+””); } $(“.sidemenu”)。追加(
    ); ******************************************************************** 加载(); /*或者你可以使用*/ myScroll.refresh(); ********************************************************************* }
    需要提醒的重要一点是,在内容显示并具有样式后,调用或刷新iscroll

             <div class="sidemenu" ></div>
    
           </div>
    
    祝你好运

             <div class="sidemenu" ></div>
    
           </div>