2

私はandroidphonegapでアプリケーションを作成しました。私のアプリケーションでは、動的に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（ローカルデータベースから値を取得し、動的に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 に答える