Javascript 如何在android phonegap中为动态div加载iscroll
我已经在android phonegap中创建了应用程序。在我的应用程序中,我在div dynamicallyloaded中添加了列表。如何使用iscroll为动态div添加滚动条。我想使用iscroll为动态div添加滚动条。如何做到这一点 我的代码是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" ><
<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>