iscroll实例化iscroll动态创建不能滑动
newIScroll(".main")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="iscroll.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body,#box{
height:100%;
width:100%;
}
#box{
display: flex;
flex-direction: column;
}
header{
height:50px;
width:100%;
line-height:50px;
text-align:center;
background:pink;
color:#007AFF;
}
footer{
height:50px;
width:100%;
line-height:50px;
text-align:center;
background:#ccc;
color:red;
}
#main{
flex:1;
overflow: hidden;
}
</style>
</head>
<body>
<div id="box">
<header>头部</header>
<div id="main">
<div>
</div>
</div>
<footer>尾部</footer>
</div>
<script type="text/javascript">
ajax()
function ajax(){
$.ajax({
url:"http://datainfo.duapp.com/shopdata/getGoods.php",
dataType:"jsonp",
success:function(data){
$.each(data,function(index){
var dl=$("<dl></dl>")
var dt=$("<dt></dt>")
var dd=$("<dd>"+data[index].goodsName+"</dd>")
var img=$("<img src='"+data[index].goodsListImg+"'/>")
dl.append(dt)
dl.append(dd)
img.on("load",function(){
dt.append(img)
myScroll.refresh()
})
$(".list").append(dl)
})
}
});
}
var myScroll = new IScroll("#main")
$(".list").on("touchend",function(){
//console.log(myScroll.y)
if(myScroll.y>50){
console.log("正在刷新")
}else if(myScroll.y<myScroll.maxScrollY-50){
ajax()
}
})
</script>
</body>
</html>
