Question

我在android phonegap中创建了应用程序。在我的应用程序中，我在div中添加了动态加载的列表。如何使用iscroll为动态div添加滚动条。我想使用iscroll.how为动态div添加滚动条来执行此操作我的代码是

HTML：

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

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

    }

动态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");   
          }
}

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

Answer 1

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

Answer 2

嗨，我不是什么意思，但如果iscroll说你的iscroll没有定义它，因为你调用loaded（）;在开始时起作用，然后在你的动态代码后面实例化，所以iscroll无法找到你的元素！

我建议你在动态div显示并回滚

之后回调加载的函数

只需回忆一下loaded（）;函数或使用iScroll.refresh（）;当你的元素已经显示时起作用。

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

 *********************************************************************
           }

提醒的重要一点是在显示内容并具有样式后调用或刷新iscroll

祝你好运！

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

2 个答案: