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的智能提示插件一枚
Feb 18 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
canvas多重阴影发光效果实现
Apr 20 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时间不正确的解决方法
2008/04/09 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python实现字符串与数组相互转换功能示例
2017/09/22 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
JAVA招聘远程笔试题
2015/07/23 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
幼儿园安全责任书
2014/04/14 职场文书
健康状况证明模板
2014/10/23 职场文书
体育教师个人工作总结
2015/02/09 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
2019年工作总结范文
2019/05/21 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
Python if else条件语句形式详解
2022/03/24 Python