iscorll插件上下滚动不了
我这个用ajax加载数据他不能上下出现滚动条，手指拉不上去
要是用普通数据就能用，这是哪里出了问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
</head>
<!--<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />-->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js?v4"></script>\
<style type="text/css">
body,
ul,
li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
font-family: helvetica;
}
#scroller ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#ul1 li {
list-style-type: none;
width: 30%;
float: left;
overflow: hidden;
margin: 1%;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background-color: #d51875;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
}
.footer {
position: absolute;
height: 40px;
background: #777777;
line-height: 40px;
text-align: center;
bottom: 0;
left: 0;
width: 100%;
font-size: 11px;
color: #777;
display: flex;
display: -moz-box;
display: -webkit-flex;
border-top: 1px solid #ccc;
color: #fff;
}
.footer nav {
text-align: center;
flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
cursor: pointer;
}
#wrapper {
position: absolute;
z-index: 1;
top: 45px;
bottom: 40px;
left: 0;
width: 100%;
background: #aaa;
overflow: auto;
}
#scroller {
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
float: left;
width: 100%;
padding: 0;
}
</style>
<script type="text/javascript">
$(function() {
document.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
function getList() {
$.ajax({
type: "get",
url: "https://api.douban.com/v2/book/search?q=javascript&alt=json&callback=fn1&start=1&count=20",
cache: false,
dataType: "jsonp",
jsonpCallback: "fn1",
success: function(data) {
var odata = data.books;
var ohtml = "";
for (var i = 0; i < odata.length; i++) {
ohtml += "<li><img src=" + odata[i]["images"]["small"] + "><p>" + odata[i]["title"] + "</p></li></ul>";
}
$("#scroller").html("<ul>"+ohtml+"</ul>");
},
error: function() {
alert("出错");
}
});
}
getList();
var myScroll = new iScroll('wrapper');
});
</script>
<body>
<header class="header">
</header>
<div id="wrapper">
<div id="scroller">
</div>
</div>
<footer class="footer">
<nav>新闻</nav>
<nav>文章</nav>
<nav>科技</nav>
<nav>女人</nav>
<nav>男人</nav>
</footer>
</body>
</html>
jquery iscroll.js Ajax JavaScript
木下秀吉大内
8 years, 8 months ago
Answers
这类插件但凡动态改写了 DOM，都要手动去 re-render 一下插件，去看看它的 API 文档里有没有对应的方法吧。
顺便帮你查了一下，看这个例子： http://iscrolljs.com/#refresh
夜丶暮色倾城_
answered 8 years, 8 months ago