如何使用iscroll javascript在手机差距？ [英] how to use iscroll javascript in phone gap?
问题描述
我已尝试为我的应用程序实施iscroll java脚本作为CSS position：fixed 的补救过程，在Android 2和3版本中无法使用 cordova 2.1.0
我已复制了iscroll-lite的javascript从在这里
$ b html
< div id =wrapperclass =wrapper> pre>
< div id =wrapper-containerclass =wrapper-container>
< div id =headerclass =header>
< div id =header_titleclass =header_title> < / div>
< div id =abcclass =abc>< img src =img / abc.png/>< / div>
< / div>
< div id =imagesclass =images>< img name =slidesrc =img / abc.pngwidth = 100％; />
& div>
< div id =descriptionclass =description>
< div id =titleclass =title>
< h1& strong>< / strong>< / h1>
< / div>
< div id =descclass =desc>
< / div>
< / div>
< div id =footerstyle =background-image：url（img / bar.png）;class =footer>
< div id =footer_textclass =footer_text> footer_text< / div>
< div id =imageclass =image noSelect>< img src =img / info.pngonclick =info（）/>< / div>
< / div>
< / div>
desc标签的内容溢出
CSS c> .wrapper
{
position：absolute; width：auto; margin：0 auto;高度：100％; overflow：hidden;
}
.wrapper_other
{
width：auto; margin：0 auto;高度：100％; overflow：hidden;
}
.wrapper_container
{
width：100％ margin：0 auto; font-family：Arial，Helvetica，sans-serif;
}
.header
{
float：left;高度：100％; min-height：100％;保证金：0％;宽度：96％;填充：3％2％0;
}
.header_title
{
float：left; padding：0％;保证金：0％;高度：100％; min-height：100％; font-size：22px; color：#FFFFFF; text-align：center; font-weight：bold;宽度：80％;
}
.images
{
position：relative; width：100％;
}
.description
{
float：left; width：100％; overflow：auto;高度：100％;
}
.title
{
width：85％; font-weight：bold; float：left; font-size：20px; margin-top：3％; margin-bottom：2％; margin-left：5％; color：#FFFFFF;
}
.desc
{
width：90％; font-size：15px; margin-left：5％;利润率：5％; float：left; color：#FFFFFF; overflow：auto; text-align：justify; line-height：18px; padding：0px 0px 40px 0px;
}
.desc p
{
margin-top：0;
}
.footer
{
width：100％; position：absolute; bottom：0; font-size：11px; color：#FFFFFF; text-align：center; height：30px;
}
.footer_text
{
text-indent：1％; float：left; text-align：center;宽度：75％; margin-top：2％;
}
.info
{
width：25％; float：right; padding-top：1％;
}
使用iscroll
< script type =text / javascriptcharset =utf-8src =iscroll.js>< / script&
< script type =text / javascriptcharset =utf = 8src =cordova-2.1.0.js>< / script>
var myScroll;
document.addEventListener（deviceready，onDeviceReady，false）;
function scroll（）
{
myScroll = new IScroll（'。wrapper'，{scrollX：false，scrollY：true}）;
}
----
----
function onDeviceReady（）
{
scroll（）;
----
----
滚动时获取以下
W / webview（3101）：由于我们正在等待WebCore对接触的响应，
问题：
它不是滚动。如果它在所有的努力之后，但它，它只滚动一次。我回到主页，并返回它不滚动。 / p>
请指导我！
编辑：我已经尝试过各种组合。所有的divs作为li标签... css是无效的。然后在每个div中使用li标签。没有使用... IT没有滚动。
< div id =wrapper
< div id =scroller>
< ul>
< div id =headerclass =header>
< div id =header_titleclass =header_title> < / div>
< div id =xyzclass =xyz>< img src =img / xyz.pngonClick =xyz（）/>< / div> < / div> < / ul>
< ul>
< div id =imagesclass =images>< img name =slidesrc =img / banner1.pngwidth = 100％; />
< / div>
< / ul>
< ul>
< div id =paramclass =param>
< div id =abcclass =abc noSelect> < / div>
< div id =defclass =def noSelect> < / div>
< div id =ghiclass =ghi noSelect> < / div>
< div id =ijkclass =ijk noSelect> < / div>
< / div>
< / ul>
< ul>
< div id =descriptionclass =description>
< div id =titleclass =title>
< h1>< strong>< li>< / li>< / strong>< / h1>
< / div>
< div id =descclass =desc>
< p>< li>< / li> < / p>
< / div>
< / div>
< / ul>
iScroll要求。 iScroll页面特别提到（注意粗体文字）：
最佳的iScroll结构是：
< div id =wrapper>
< ul>
< li>< / li>
...
...
< / ul>
< / div>
在此示例中，将滚动UL元素。 iScroll必须
应用于滚动区域的包装器。
重要提示：只有包装器元素的第一个子元素为
滚动。如果您在滚动器中需要更多元素，可以使用
以下结构：< div id =wrapper>
< div id =scroller>
< ul>
< li>< / li>
...
...
< / ul>
< ul>
< li>< / li>
...
...
< / ul>
< / div>
< / div>
在此示例中，滚动元素将滚动（与
一起，两个UL）。
您有：
< div id =wrapperclass =wrapper>
< div id =wrapper-containerclass =wrapper-container>
... head ...
< / div>
...（你的主div在这里）...
< / div>
所以你的主div不会被iScroller滚动， 。请查看 iScroll演示并首先测试...您的设备可以正常使用吗？如果是，请尝试遵循其结构。
I have tried implementing the iscroll java script for my application as a remedial process for the CSS position:fixed that does not work in android 2 and 3 versions using cordova 2.1.0
I have copied the javascript of iscroll-lite from here
html code
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
<div id="header" class="header">
<div id="header_title" class="header_title"> </div>
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
</div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%; />
</div>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong></strong></h1>
</div>
<div id="desc" class="desc">
</div>
</div>
<div id="footer" style="background-image:url(img/bar.png);" class="footer">
<div id="footer_text" class="footer_text">footer_text</div>
<div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
</div>
</div>
The content of desc tag is going to overflow
CSS
.wrapper
{
position: absolute; width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_other
{
width:auto; margin:0 auto; height:100%; overflow: hidden;
}
.wrapper_container
{
width:100%; margin:0 auto; font-family:Arial, Helvetica, sans-serif;
}
.header
{
float:left; height:100%; min-height:100%; margin:0%; width:96%; padding:3% 2% 0;
}
.header_title
{
float:left; padding:0%; margin:0%; height:100%; min-height:100%; font-size:22px; color: #FFFFFF; text-align:center; font-weight: bold; width:80%;
}
.images
{
position:relative; width:100%;
}
.description
{
float:left; width:100%; overflow:auto; height:100%;
}
.title
{
width:85%; font-weight:bold; float:left; font-size:20px; margin-top:3%; margin-bottom:2%; margin-left:5%; color:#FFFFFF;
}
.desc
{
width:90%; font-size:15px; margin-left:5%; margin-right:5%; float:left; color: #FFFFFF; overflow:auto; text-align:justify; line-height:18px; padding:0px 0px 40px 0px;
}
.desc p
{
margin-top:0;
}
.footer
{
width:100%; position:absolute; bottom:0; font-size:11px; color:#FFFFFF; text-align:center; height:30px;
}
.footer_text
{
text-indent:1%; float:left; text-align:center; width:75%; margin-top:2%;
}
.info
{
width:25%; float:right; padding-top:1%;
}
USING iscroll
<script type="text/javascript" charset="utf-8" src="iscroll.js"></script>
<script type="text/javascript" charset="utf=8" src="cordova-2.1.0.js"></script>
var myScroll;
document.addEventListener("deviceready", onDeviceReady, false);
function scroll()
{
myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});
}
----
----
function onDeviceReady()
{
scroll();
----
----
On scrolling,I just get the following
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
PROBLEM:
It is is not scrolling.If at all it does after great effort on it but,it scrolls only once.I go back to the main page and return it does not scroll at all.
Please,Guide me!!
EDIT: this I have tried in various combinations..replacing all the divs as li tag...the css wasn't effective. then used li tag within each div. No use... IT did not scroll.:
<div id="wrapper">
<div id="scroller">
<ul>
<div id="header " class="header ">
<div id="header_title" class="header_title"> </div>
<div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div> </div> </ul>
<ul>
<div id="images" class="images"><img name="slide" src="img/banner1.png" width=100%; />
</div>
</ul>
<ul>
<div id="param" class="param">
<div id="abc" class="abc noSelect"> </div>
<div id="def" class="def noSelect" > </div>
<div id="ghi" class="ghi noSelect" > </div>
<div id="ijk" class="ijk noSelect" > </div>
</div>
</ul>
<ul>
<div id="description" class="description">
<div id="title" class="title">
<h1><strong><li></li></strong></h1>
</div>
<div id="desc" class="desc">
<p><li></li> </p>
</div>
</div>
</ul>
You don't seem to be following the structure that iScroll asks for. The iScroll page specifically mentions (note the bold text):
The optimal iScroll structure is:
<div id="wrapper"> <ul> <li></li> ... ... </ul> </div>In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.
Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure:
<div id="wrapper"> <div id="scroller"> <ul> <li></li> ... ... </ul> <ul> <li></li> ... ... </ul> </div> </div>In this example the scroller element will be scrolled (together with the two ULs).
You have:
<div id="wrapper" class="wrapper">
<div id="wrapper-container" class="wrapper-container">
... head ...
</div>
... (your main div here) ...
</div>
So your main div won't be scrolled by iScroller, you're only making the header div scrollable. Have a look at the iScroll demo and test it out first... does it work OK for your device? If yes, try to follow its structure.
这篇关于如何使用iscroll javascript在手机差距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
