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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python查看列的唯一值方法
2018/07/17 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
python和c语言哪个更适合初学者
2020/06/22 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
年度献血先进个人事迹材料
2014/02/14 职场文书
预防传染病方案
2014/06/14 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL