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 相关文章推荐
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
详解redux异步操作实践
Aug 15 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
CI框架附属类用法分析
2018/12/26 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
React手稿之 React-Saga的详解
2018/11/12 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
django 微信网页授权登陆的实现
2019/07/30 Python
python实现机器人卡牌
2019/10/06 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
基于matplotlib xticks用法详解
2020/04/16 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
应届生煤化工求职信
2013/10/21 职场文书
财务会计实习报告体会
2013/12/20 职场文书
公司授权委托书范本
2014/04/03 职场文书
表彰大会新闻稿
2015/07/17 职场文书
自书遗嘱范文
2015/08/07 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书