简易下拉刷新

css样式:

 1                         *{
 2                 margin: 0px;
 3                 padding: 0px;
 4
 5             }
 6             #wrapper{
 7                 width: 100%;
 8                 height: 150px;
 9                 border: 1px solid red;
10                 overflow: hidden;
11                 position: absolute;
12             }
13             #shua{
14                 text-align: center;
15             }                    

HTML代码

 1             <div id="wrapper">
 2             <div>
 3                 <div id="shua">刷新</div>
 4                 <ul>
 5                     <li>1</li>
 6                     <li>2</li>
 7                     <li>3</li>
 8                     <li>4</li>
 9                     <li>5</li>
10                     <li>6</li>
11                     <li>7</li>
12                     <li>8</li>
13                     <li>9</li>
14                     <li>10</li>
15                 </ul>
16             </div>
17         </div>        

在写js代码之前,要引入jQuery插件和 iscroll插件

然后js代码如下:      <script type="text/javascript">

         //给内容添加滚动事件
 2             var a=new IScroll("#wrapper",{
 3                 scrollbars:true,
 4                 mouseWheel:true,
 5                 interactiveScrollbars:true,
 6 //                scrollX:true,
 7 //                freeScroll:true,
 8                 probeType:2,
 9             })         //让文字先隐藏
10             $("#shua").hide();11             var x=0;
12             a.on("scroll",function(){
13                 if(x==0){
14                     if(this.y>40){
15                         $("#shua").show();
16                         $("#shua").text("松开手进行刷新")
17                         x=1;
18                     }
19                 a.on("scrollEnd",function(){
20                     if(x==1){
21                         $("#shua").text("正在刷新")
22                         setTimeout(shuju,1000)
23                         x=2;
24                     }
25                 })
26                 var z=0;
27                 function shuju(){
28                     if(x==2){
29                         $("#shua").hide();
30                         $("ul>li:nth-child(1)").before($("<li></li>").text("数据"+ z++))
31                         a.refresh()
32                         x=0;
33                     }
34
35                 }
36             }
37
38         })
39         </script>

这样就完成了一个简单的下拉刷新!!

转载于:https://www.cnblogs.com/user-5253/p/7078200.html

Iscrool下拉刷新相关推荐

  1. 使用iScroll实现上拉或者下拉刷新

    上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...

  2. 微信小程序下拉刷新和上拉加载

    效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view  实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...

  3. android google 下拉刷新 csdn,android SwipeRefreshLayout google官方下拉刷新控件

    下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...

  4. 使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)

    <template><div class="sg-page-body"><div class="sg-list"><v ...

  5. 微信小程序下拉刷新和上拉加载的实现

    微信小程序开发交流qq群   173683895    承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...

  6. 微信小程序订单页面下拉刷新上拉分页加载

    微信小程序开发交流qq群   581478349    承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...

  7. 20-flutter下拉刷新与上拉加载

    1 RefreshIndicator 下拉刷新控件 下拉刷新的时候会回调 onRefresh 方法 RefreshIndicator(onRefresh: _handleRefresh,child: ...

  8. refreshcontrol 实现下拉刷新的功能

    该组件实现下拉刷新的功能.不过该组件是用在ScrollView的内部的,为ScrollView添加一个下拉刷新的功能.当ScrollView的垂直方向的偏移量scrollY:0的时候,手指往下拖拽Sc ...

  9. 使用Google 官方的控件SwipeRefreshLayout实现下拉刷新功能

    之前做东西的时候,经常会用到下拉刷新的功能,之前大家都在使用Github上的一个很著名的开源项目 PullToRefresh 但是,现在好消息来了,google在19.1版本的support-v4兼容 ...

最新文章

  1. python 异常处理模块_我的python学习之路-异常处理和模块导入
  2. [caffe]深度学习之图像分类模型AlexNet解读
  3. 用VS2010调试微软开放的部分源码
  4. 数据加密算法的简介与应用
  5. P4146 序列终结者 平衡树 + lazy维护
  6. 笨方法“学习python笔记之print()函数end
  7. 20145231熊梓宏 《网络对抗》 实验四 恶意代码分析
  8. 码云怎么创建公开的仓库_使用码云创建属于你的免费私有git仓库
  9. modbus tcp主站和从站_图文讲解PLC通讯MODBUS协议的应用及编程
  10. 局域网共享工具_还在用数据线?快来试试网页版局域网共享工具!
  11. 关于计算机网考教学研讨,【计算机教学论文】计算机教学质量的研讨2篇(共4479字)...
  12. 旧版macOS官方下载地址
  13. node.js map 的用法
  14. VR概述及初识Unity 3D
  15. 球体与简单几何体的切接问题
  16. 云上数据保护,你以为挡住黑客就够了?
  17. java系统包有哪些东西吗_Java系统包有哪些?
  18. ZOJ 3964 NIM变形
  19. 连续1D空战辅助决策问题的DDPG实现
  20. MySQL查询当前时间的前几天的数据

热门文章

  1. 做一个优秀的时间管理者
  2. [软件安全].任伟.扫描版
  3. 安全事件响应观察报告家族
  4. Exploring Word Vextors
  5. 安利2款好用的笔记软件给你们
  6. ARTS-第二周(2019.07.08)
  7. 中信银行面试前准备好多材料_面试准备帮助我在锁定期间获得了多个报价
  8. matlab绘制图形hold on_Matlab中的命令hold on hold off
  9. 攒机需要注意的8条技巧 转太平洋网
  10. node.js基于微信小程序的校园失物招领毕业设计源码072343