iscroll 上拉加载和下拉刷新

2019-08-06 12:03:20 阅读：194 来源： 互联网

标签：width color myscroll 100% height iscroll 上拉 text 加载

<!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

参考链接：https://www.jianshu.com/p/e6127f1e654f

标签：width,color,myscroll,100%,height,iscroll,上拉,text,加载
来源： https://www.cnblogs.com/haqiao/p/11308038.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

iscroll 上拉加载和下拉刷新