<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0"> <title>Title</title> <script src="js/jquery.min.js"></script> <script src="js/iscroll.js"></script> </head> <style> *{margin:0px;padding:0px;} ul{list-style-type:none;} html,body{width:100%;height:100%;} header{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;} footer{width:100%;height:10%;text-align:center;line-height:50px;background:black;color:white;font-size:12px;} .box{width:100%;height:80%;overflow:hidden;} #wrap{width:100%;height:auto;} .shuaxin{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;} #wrap li{width:100%;line-height:150px;color:yellow;background:blue;text-align:center;border-bottom:1px dashed yellow;} .jiazai{width:100%;height:20px;text-align:center;background:#ccc;color:black;display:none;} </style> <body> <header>这个就是测试上拉加载和下拉刷新</header> <div class="shuaxin">你在下拉刷新</div> <div class="box"> <ul id="wrap"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="jiazai">你是在上拉加载</div> <footer>这个就是底部</footer> </body> <script> $(function(){ var myscroll = new IScroll('.box'); $(document).on("touchend",function(){ console.log(myscroll.y); if(myscroll.y==0) { $(".shuaxin").hide(); } if(myscroll.y==myscroll.maxScrollY) { $(".jiazai").hide(); } myscroll.refresh(); }); $(document).on("touchmove",function(){ console.log(myscroll.y); if(myscroll.y>20) { $(".shuaxin").show(); } if(myscroll.y<myscroll.maxScrollY-20) { $(".jiazai").show(); } }) }) </script> </html>
p.s. 记得引入JQ和iscroll.js