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实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
vue调用语音播放的方法
Sep 27 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python如何定义带参数的装饰器
2018/03/20 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
django实现支付宝支付实例讲解
2019/10/17 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
银行自荐信范文
2013/10/07 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
体育专业大学生职业生涯规划范文:打造自己的运动帝国
2014/09/12 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
推广普通话的宣传语
2015/07/13 职场文书
《分数的意义》教学反思
2016/02/20 职场文书