<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>window.PointerEvent = void 0</script>
<!-- 解决谷歌浏览器iScroll卡顿 -->
<script src="js/iscroll.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/mock.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
height: 100vh;
flex-direction: column;
}
section{
flex: 1;
overflow: hidden;
}
header,footer{
background: orange;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
width: 100%;
}
ul li{
height: 100px;
list-style: none;
}
nav{
overflow: hidden;
}
ol{
width: 1100px;
height: 50px;
text-align: center;
line-height: 50px;
border-bottom: 1px solid #ddd
}
ol li{
float: left;
width: 100px;
list-style: none;
}
</style>
</head>
<body>
<header>头部</header>
<nav>
<ol>
</ol>
</nav>
<section>
<ul>
</ul>
</section>
<footer>底部</footer>
</body>
<script>
var myscroll=new IScroll("section",{})
var myscroll1=new IScroll("nav",{
scrollX:true
})
Mock.mock("http://www.a.com/api",{
"list|8-12":[{
"id|+1":0,
name:"@cname"
}]
})
Mock.mock("http://www.a.com/api1",{
"list|6-10":[{
"id|+1":0,
name:"@cname"
}]
})
$.ajax({
type:"post",
dataType:"json",
url:"http://www.a.com/api",
success:function(data){
console.log(data.list)
var arr=data.list;
var str="";
for(var i=0;i<arr.length;i++){
str+=`<li>${arr[i].name}</li>`
}
$("ul").html(str);
myscroll.refresh()
}
})
$.ajax({
type:"post",
dataType:"json",
url:"http://www.a.com/api1",
success:function(data){
console.log(data.list)
var arr=data.list;
var str="";
for(var i=0;i<arr.length;i++){
str+=`<li>${arr[i].name}</li>`
}
$("ol").html(str);
myscroll.refresh()
}
})
$("header").click(function(){
// myscroll.destroy(); //点击滑动效果失效
myscroll.scrollTo(0,0,2000)
})
$(document).on("touchend",function(){
if(myscroll.y>60){
setTimeout(function(){
location.reload() // 下拉刷新
},500)
}
if(myscroll.y<myscroll.maxScrollY-60){
setTimeout(function(){
$.ajax({
typpe:"post",
dataType:"json",
url:"http://www.a.com/api",
success:function(data){
var arr=data.list;
for(var i=0;i<arr.length;i++){
$("ul").append('<li>'+arr[i].name+'</li>') //上拉加载
myscroll.refresh();
}
}
})
},1000)
}
})
</script>
</html>
移动端IScroll插件滚动效果
最新推荐文章于 2024-06-21 11:16:10 发布