zoukankan      html  css  js  c++  java
  • Iscrool下拉刷新

     简易下拉刷新

    css样式:

     1                         *{
     2                 margin: 0px;
     3                 padding: 0px;
     4                 
     5             }
     6             #wrapper{
     7                  100%;
     8                 height: 150px;
     9                 border: 1px solid red;
    10                 overflow: hidden;
    11                 position: absolute;
    12             }
    13             #shua{
    14                 text-align: center;
    15             }                    

    HTML代码

     1             <div id="wrapper">
     2             <div>
     3                 <div id="shua">刷新</div>
     4                 <ul>
     5                     <li>1</li>
     6                     <li>2</li>
     7                     <li>3</li>
     8                     <li>4</li>
     9                     <li>5</li>
    10                     <li>6</li>
    11                     <li>7</li>
    12                     <li>8</li>
    13                     <li>9</li>
    14                     <li>10</li>
    15                 </ul>
    16             </div>
    17         </div>        

    在写js代码之前,要引入jQuery插件和 iscroll插件

    然后js代码如下:      <script type="text/javascript">

             //给内容添加滚动事件
     2             var a=new IScroll("#wrapper",{
     3                 scrollbars:true,
     4                 mouseWheel:true,
     5                 interactiveScrollbars:true,
     6 //                scrollX:true,
     7 //                freeScroll:true,
     8                 probeType:2,
     9             })
             //让文字先隐藏
    10 $("#shua").hide();
    11 var x=0; 12 a.on("scroll",function(){ 13 if(x==0){ 14 if(this.y>40){ 15 $("#shua").show(); 16 $("#shua").text("松开手进行刷新") 17 x=1; 18 } 19 a.on("scrollEnd",function(){ 20 if(x==1){ 21 $("#shua").text("正在刷新") 22 setTimeout(shuju,1000) 23 x=2; 24 } 25 }) 26 var z=0; 27 function shuju(){ 28 if(x==2){ 29 $("#shua").hide(); 30 $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++)) 31 a.refresh() 32 x=0; 33 } 34 35 } 36 } 37 38 }) 39 </script>

    这样就完成了一个简单的下拉刷新!!

  • 相关阅读:
    快速搭建 STF开源云测平台 测试人员专用
    快速搭建sonarqube代码检测平台
    使用jenkins交付微服务应用至kubernetes集群
    普通主机拥有集群控制权限
    为ingress资源添加basic auth认证
    GO语言入门
    GO语言入门
    GO语言入门
    GO语言入门
    关闭提示的下拉框
  • 原文地址:https://www.cnblogs.com/user-5253/p/7078200.html
Copyright © 2011-2022 走看看