2

我已经在 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;
 }

脚本：

  • 滚动：

    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（我已从本地数据库检索值并动态附加到 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（我已从本地数据库检索值并动态附加到 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添加滚动条。请指导我。提前谢谢

4

1 回答 1

0

看起来在文档完成加载之前调用了 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();
   }
于 2012-04-20T10:03:04.660 回答