Iscrool下拉刷新
简易下拉刷新
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下拉刷新相关推荐
- 使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...
- 微信小程序下拉刷新和上拉加载
效果图 微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的 个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下 其实 ...
- android google 下拉刷新 csdn,android SwipeRefreshLayout google官方下拉刷新控件
下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单 今天就来使用下SwipeRefres ...
- 使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据,下拉刷新当前列表数据(等同于翻页功能)
<template><div class="sg-page-body"><div class="sg-list"><v ...
- 微信小程序下拉刷新和上拉加载的实现
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 &q ...
- 微信小程序订单页面下拉刷新上拉分页加载
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 效果图: 代码: json代码: {"enablePullDownRefresh" ...
- 20-flutter下拉刷新与上拉加载
1 RefreshIndicator 下拉刷新控件 下拉刷新的时候会回调 onRefresh 方法 RefreshIndicator(onRefresh: _handleRefresh,child: ...
- refreshcontrol 实现下拉刷新的功能
该组件实现下拉刷新的功能.不过该组件是用在ScrollView的内部的,为ScrollView添加一个下拉刷新的功能.当ScrollView的垂直方向的偏移量scrollY:0的时候,手指往下拖拽Sc ...
- 使用Google 官方的控件SwipeRefreshLayout实现下拉刷新功能
之前做东西的时候,经常会用到下拉刷新的功能,之前大家都在使用Github上的一个很著名的开源项目 PullToRefresh 但是,现在好消息来了,google在19.1版本的support-v4兼容 ...
最新文章
- python 异常处理模块_我的python学习之路-异常处理和模块导入
- [caffe]深度学习之图像分类模型AlexNet解读
- 用VS2010调试微软开放的部分源码
- 数据加密算法的简介与应用
- P4146 序列终结者 平衡树 + lazy维护
- 笨方法“学习python笔记之print()函数end
- 20145231熊梓宏 《网络对抗》 实验四 恶意代码分析
- 码云怎么创建公开的仓库_使用码云创建属于你的免费私有git仓库
- modbus tcp主站和从站_图文讲解PLC通讯MODBUS协议的应用及编程
- 局域网共享工具_还在用数据线?快来试试网页版局域网共享工具!
- 关于计算机网考教学研讨,【计算机教学论文】计算机教学质量的研讨2篇(共4479字)...
- 旧版macOS官方下载地址
- node.js map 的用法
- VR概述及初识Unity 3D
- 球体与简单几何体的切接问题
- 云上数据保护,你以为挡住黑客就够了?
- java系统包有哪些东西吗_Java系统包有哪些?
- ZOJ 3964 NIM变形
- 连续1D空战辅助决策问题的DDPG实现
- MySQL查询当前时间的前几天的数据