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 操作Array数组的方法及属性实例解析
Jan 08 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 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
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
返回上一页并自动刷新的JavaScript代码
2014/02/19 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
Python logging模块学习笔记
2014/05/24 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python简单实现基数排序算法
2015/05/16 Python
python自定义异常实例详解
2017/07/11 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python新手学习函数默认参数设置
2020/06/03 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
家长给幼儿园的表扬信
2014/01/09 职场文书
投标邀请书范文
2014/01/31 职场文书
元旦主持词开场白
2015/05/29 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
室外天线与收音机天线杆接合方法
2022/04/05 无线电