Question

我在android phonegap中创建了应用程序。在我的应用程序中，我在div中动态添加了列表。我想使用iscroll为动态div添加滚动条。我的代码是

Html：

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

风格：

 #scroller 
 {
 top:90px;
 position:absolute; z-index:1;
 width:90%;
 height:40px;
 background-color:#FFFFFF;
 }
 li
  {
 list-style:none;
 }

脚本：

iscroll：

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

列表1： - 动态div（我从localdatabase中重新获取值并动态地附加到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");   
  }
}

列表2： - 动态div（我从localdatabase中重新获取值并动态地附加到div中）：

       function retrieveservercauses(arr)
        {

   document.addEventListener("deviceready", onDeviceReady, false);
   function onDeviceReady() 
   {
         var db = window.openDatabase("createdb", "1.0", "PhoneGap Demo", 200000);
         db.transaction(populateDB, errorCB,successCB);
   } 
   function populateDB(tx) 
   {
          tx.executeSql('CREATE TABLE IF NOT EXISTS Name (Name)');
          for(i=0;i<arr.length;i++){
          var arra=arr[i];
          tx.executeSql('INSERT INTO Name (Name)VALUES(?)',[arra]);
          }
   }
   function errorCB(err) 
   {
      //    alert("Error processing SQL: "+err.code);
   }
   function successCB() 
   {
       var db = window.openDatabase("createdb", "1.0", "PhoneGap Demo", 200000);
       db.transaction(queryDB, errorCB);
   }
   function queryDB(tx) 
  {
        var text=$("#searchbox").val();
        tx.executeSql("SELECT * FROM Name WHERE Name LIKE '%" + text + "%'",[], querySuccess1, errorCB);
  }
    function querySuccess1(tx,results) 
    {
        var ar=new Array();
        for (i = 0; i < results.rows.length; i++) 
        {
             var text=$("#searchbox").val();
             var name=results.rows.item(i).Name;
             ar.push(name);
        }
        list2(ar);
        droptextvalue();
        insertTextvalue(text,ar);
    } 
     }

       function list2(ar)
        {

    for(i=0;i<ar.length;i++)
        {

    $(".searchsidemenu").append("<li>"+"<a href='#'>" +ar[i] +"</a>"+"</li>"); 

       }    
         doIscrollRefresh ();
          $(".searchsidemenu").hide();

            }

如何动态添加滚动条？它显示了logcat中的错误。错误是myScroll未定义不是对象。请告诉我解决方案。如何添加动态div.please的滚动条指导我。提前谢谢

Answer 1

看起来在文档加载完成之前调用了doIscrollRefresh函数。我无法从你的代码中告诉我们正在调用list1函数，但你应该做的就是这个顺序：

1：等待文档加载，以便在创建滚动条时存在div（您已经这样做了）
2：创建滚动对象 3：在创建文档就绪和滚动条之后声明你的doIscrollRefresh函数 4：最后在所有火灾列表1之后，做你的事。

尝试删除list1顶部的doIscrollRefresh并将其移至querySuccess（就像我在下面评论过的那样）。像这样：

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

使用jquery或javascript（用于android phonegap）动态div的滚动条

1 个答案: