14
Tôi đã cố gắng thực hiện kịch bản java iscroll cho ứng dụng của tôi như một quá trình khắc phục hậu quả đối với CSS position: fixed điều đó không làm việc trong android 2 và 3 phiên bản sử dụng cordova 2.1.0làm thế nào để sử dụng javascript iscroll trong khoảng cách điện thoại?
Tôi đã copy javascript của iscroll-lite từ here
mã html
<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>
Nội dung của thẻ desc sẽ tràn
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%;
}
SỬ DỤNG 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 di chuyển, tôi chỉ nhận được như sau
W/webview(3101): Miss a drag as we are waiting for WebCore's response for touch down.
VẤN ĐỀ:
Đó là không scrolling.If ở tất cả nó sau khi nỗ lực rất lớn vào nó nhưng, nó cuộn chỉ once.I quay trở lại trang chính và gửi lại nó không cuộn chút nào.
Xin vui lòng, Hướng dẫn tôi !!
EDIT: điều này tôi đã thử trong các kết hợp khác nhau..đặt tất cả các div như thẻ li ... css không hiệu quả. sau đó sử dụng thẻ li trong mỗi div. Không sử dụng ... CNTT không cuộn:
<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>
Ai đó thường giúp chúng tôi !!! xin vui lòng ... xin vui lòng – elegance