Iscrool下拉刷新功能实现方法(推荐)


Posted in Javascript onJune 26, 2017

简易下拉刷新实现方法

css样式:

*{
        margin: 0px;
        padding: 0px;
        
      }
      #wrapper{
        width: 100%;
        height: 150px;
        border: 1px solid red;
        overflow: hidden;
        position: absolute;
      }
      #shua{
        text-align: center;
      }

HTML代码

<div id="wrapper">
      <div>
        <div id="shua">刷新</div>
        <ul>
          <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>

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

然后js代码如下:

<script type="text/javascript">

//给内容添加滚动事件
      var a=new IScroll("#wrapper",{
        scrollbars:true,
        mouseWheel:true,
        interactiveScrollbars:true,
//        scrollX:true,
//        freeScroll:true,
        probeType:2,
      })



 //让文字先隐藏
      $("#shua").hide();
      var x=0;
      a.on("scroll",function(){
        if(x==0){
          if(this.y>40){
            $("#shua").show();
            $("#shua").text("松开手进行刷新")
            x=1;
          }
        a.on("scrollEnd",function(){
          if(x==1){
            $("#shua").text("正在刷新")
            setTimeout(shuju,1000)
            x=2;
          }
        })
        var z=0;
        function shuju(){
          if(x==2){
            $("#shua").hide();
            $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++))
            a.refresh()
            x=0;
          }
              
        }
      }
        
    })
    </script>

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

以上这篇Iscrool下拉刷新功能实现方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js调试系列 断点与动态调试[基础篇]
Jun 18 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
webpack中的热刷新与热加载的区别
Apr 09 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 #Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 #Javascript
浅谈JS如何实现真正的对象常量
Jun 25 #Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 #Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 #Javascript
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
JS检测window.open打开的窗口是否关闭
Jun 25 #Javascript
You might like
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
php批量修改表结构实例
2017/05/24 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
Python实现Linux下守护进程的编写方法
2014/08/22 Python
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
德国购买健身器材:AsVIVA
2017/08/09 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
《海底世界》教学反思
2014/04/16 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
房屋维修协议书范本
2014/09/25 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
培训师岗位职责
2015/02/14 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript