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 相关文章推荐
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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 URL跳转代码 减少外链
2011/06/25 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
对于jQuery性能的一些优化建议
2015/08/13 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
js中this对象用法分析
2018/01/05 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
django创建简单的页面响应实例教程
2019/09/06 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
介绍一下内联、左联、右联
2013/12/31 面试题
营销与策划个人求职信
2013/09/22 职场文书
房地产开发项目建议书
2014/05/16 职场文书
暑期学习心得体会
2014/09/02 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
出生公证书
2015/01/23 职场文书
打架检讨书范文
2015/01/27 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
python实现手机推送 代码也就10行左右
2022/04/12 Python
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android