- 首页
- 前端开发
- 如何在手机间隙中使用 iscroll javascript?
如何在手机间隙中使用 iscroll javascript?
[英] how to use iscroll javascript in phone gap?
本文介绍了如何在手机间隙中使用 iscroll javascript?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已尝试为我的应用程序实现 iscroll java 脚本，作为 CSS position:fixed 的补救过程，该脚本在使用 cordova 2.1.0 的 android 2 和 3 版本中不起作用
我从这里复制了iscroll-lite的javascript
html 代码
<div id="wrapper-container" class="wrapper-container"><div id="header" class="header"><div id="header_title" class="header_title">
<div id="abc" class="abc"><img src="img/abc.png""/> </div>
<div id="images" class="images"><img name="slide" src="img/abc.png" width=100%;/>
<div id="description" class="description"><div id="title" class="title"><h1><strong></strong></h1>
<div id="desc" class="desc">
<div id="footer" style="background-image:url(img/bar.png);"类=页脚"><div id="footer_text" class="footer_text">footer_text</div><div id="image" class="image noSelect"><img src="img/info.png" onclick="info()"/></div>
desc标签的内容会溢出
CSS
.wrapper{位置:绝对；宽度:自动；保证金:0 自动；高度:100%；溢出:隐藏；}.wrapper_other{宽度:自动；保证金:0 自动；高度:100%；溢出:隐藏；}.wrapper_container{宽度:100%；保证金:0 自动；字体系列:Arial、Helvetica、sans-serif；}.header{向左飘浮;高度:100%；最小高度:100%；保证金:0%；宽度:96%；填充:3% 2% 0;}.header_title{向左飘浮;填充:0%；保证金:0%；高度:100%；最小高度:100%；字体大小:22px；颜色:#FFFFFF；文字对齐:居中；字体粗细:粗体；宽度:80%；}.图片{位置:相对；宽度:100%；}.描述{向左飘浮;宽度:100%；溢出:自动；高度:100%；}.标题{宽度:85%；字体粗细:粗体；向左飘浮;字体大小:20px；保证金最高:3%；保证金底部:2%；左边距:5%；颜色:#FFFFFF；}.desc{宽度:90%；字体大小:15px；左边距:5%；右边距:5%；向左飘浮;颜色:#FFFFFF；溢出:自动；文本对齐:对齐；行高:18px；填充:0px 0px 40px 0px;}.desc p{边距顶部:0;}.页脚{宽度:100%；位置:绝对；底部:0;字体大小:11px；颜色:#FFFFFF；文字对齐:居中；高度:30px；}.footer_text{文本缩进:1%；向左飘浮;文字对齐:居中；宽度:75%；保证金最高:2%；}.信息{宽度:25%；浮动:右；填充顶部:1％；}
使用 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);函数滚动(){myScroll = new IScroll('.wrapper', { scrollX:false , scrollY:true});}--------函数 onDeviceReady(){滚动();--------
在滚动时，我只得到以下内容
W/webview(3101):因为我们正在等待 WebCore 对着陆的响应，所以错过了一次拖拽.
问题:
它不是滚动.如果它确实经过了很大的努力，但它只滚动一次.我返回主页并返回它根本不滚动.
请指导我！！
我尝试了各种组合.将所有 div 替换为 li 标签...css 无效.然后在每个 div 中使用 li 标签.没用...它没有滚动.:
<div id="滚动条"><ul><div id="header" class="header"><div id="header_title" class="header_title">
<div id="xyz" class="xyz"><img src="img/xyz.png" onClick="xyz()"/></div>
<ul><div id="images" class="images"><img name="slide" src="img/banner1.png" width=100%;/>
<ul><div id="param" class="param"><div id="abc" class="abc noSelect">
<div id="def" class="def noSelect" >
<div id="ghi" class="ghi noSelect" >
<div id="ijk" class="ijk noSelect" >
<ul><div id="description" class="description"><div id="title" class="title"><h1><strong><li></li></strong></h1>
<div id="desc" class="desc"><p><li></li></p>
解决方案
您似乎没有遵循 iScroll 要求的结构.iScroll 页面特别提到(注意粗体字):
<块引用>最佳iScroll结构是:
<ul><li></li>......
在这个例子中，UL 元素将被滚动.iScroll 必须是应用于滚动区域的包装器.
重要:只有包装元素的第一个子元素会被滚动.如果您需要滚动条内的更多元素，您可以使用以下结构:
<div id="滚动条"><ul><li></li>......<ul><li></li>......
在这个例子中，scroller 元素将被滚动(连同两个 UL).
你有:
<div id="wrapper-container" class="wrapper-container">... 头 ...
...(您的主要 div 在这里)...
所以你的主 div 不会被 iScroller 滚动，你只是让标题 div 可滚动.看看 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屋！
查看全文
