iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战
上拉刷新,下拉加载更多。。。仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法:
(如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意)
html如下:
- <div class="viewport">
- <div id="wrapper" class="wrapper">
- <div id="scroller">
- <div id="scroller-pullDown">
- <span id="down-icon" class="pull-down-icon fa fa-refresh fa-spin fa-fw"></span>
- <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
- </div>
- <div id="scroller-content">
- //你写的内容在这里
- </div>
- <div id="scroller-pullUp">
- <span id="up-icon" class="pull-up-icon fa fa-spinner fa-spin fa-fw"></span>
- <span id="pullUp-msg" class="pull-up-msg">上拉加载</span>
- </div>
- </div>
- </div>
- </div>
css如下:
- /* =================iscroll================================= */
- #wrapper {
- position: absolute;
- z-index:;
- top: 210*@size;
- bottom: 0px;
- left:;
- width: 100%;
- overflow: hidden;
- }
- #scroller {
- position: absolute;
- z-index:;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- width: 100%;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- -webkit-text-size-adjust: none;
- -moz-text-size-adjust: none;
- -ms-text-size-adjust: none;
- -o-text-size-adjust: none;
- text-size-adjust: none;
- }
- #scroller-pullDown,
- #scroller-pullUp {
- background: #333333;
- height: 50px;
- line-height: 50px;
- border-bottom: 1px solid #ccc;
- font-weight: bold;
- font-size: 14px;
- color: #888;
- text-align: center;
- position: absolute;
- left: 0px;
- width: 100%;
- }
- #scroller-pullDown {
- top: -50px;
- }
- #scroller-pullUp {
- bottom: -50px;
- }
- .pull-up-msg,
- .pull-down-msg {
- padding-left: 5px;
- position: relative;
- top: 0px;
- }
- #scroller-pullDown .pull-down-icon,
- #scroller-pullUp .pull-up-icon {
- display: inline-block;
- color: #e84c3d;
- font-size: 16px;
- }
js代码看这里:
- function pushData(m) {
- var m = m || 10;
- if (flag) {
//发送Ajax,循环自己的数据加载:- $.myGET(uri, {formData}, function (data) {
- if (data.result) {
- for (var i = 0; i < data.package.length; i++) {
- data.package[i].isPass ? data.package[i].isPass = "pass" : data.package[i].isPass = "unpass";
- temp = '<li>' + '<span class="item ellips">' + data.package[i].planName + '</span>' + '<span class="time">' + '2017.03.08' + '</span>' + '<span class="score">' + data.package[i].score + '</span>' + '<span class="status"><img src="/images/mainFrame/icon_result_' + data.package[i].isPass + '.png" alt=""></span>' + '<li>';
- $("#target").append(temp);
- }
- if (m * n > data.total) {
- $("#pullUp-msg").text("已无更多数据");
- flag = false;
- return false;
- }
- }
- }
- (function(window) {
- var myScroll,
- upIcon = $("#up-icon"),
- downIcon = $("#down-icon"),
- target = $("#target"),
- temp = " ";
- myScroll = new IScroll('#wrapper', {
- probeType: 3,
- mouseWheel: true
- });
- myScroll.on("scroll", function() {
- var y = this.y,
- maxY = this.maxScrollY - y,
- downHasClass = downIcon.hasClass("reverse_icon"),
- upHasClass = upIcon.hasClass("reverse_icon");
- if (y >= 40) {
- !downHasClass && downIcon.addClass("reverse_icon");
- return "";
- } else if (y < 40 && y > 0) {
- downHasClass && downIcon.removeClass("reverse_icon");
- return "";
- }
- if (maxY >= 40) {
- !upHasClass && upIcon.addClass("reverse_icon");
- return "";
- } else if (maxY < 40 && maxY >= 0) {
- upHasClass && upIcon.removeClass("reverse_icon");
- return "";
- }
- });
- //下拉逻辑在这里!
- myScroll.on("slideDown", function() {
- if (this.y > 40) {
- window.location.reload();
- }
- });
- //上拉逻辑在这里!
- myScroll.on("slideUp", function() {
- if (this.maxScrollY - this.y > 40) {
- pushData();
- myScroll.refresh();
- }
- });
- })(window)
iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战的更多相关文章
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- 微信小程序 上拉刷新/下拉加载
小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...
- ListView上拉刷新和分页加载完整的Dome
很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...
- jQuery WeUI 组件下拉刷新和滚动加载的实现
最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...
- 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...
- 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析
注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...
随机推荐
- PHP反射原理的实现
反射 反射,直观理解就是根据到达地找到出发地和来源.我们可以仅仅通过一个光秃秃对象就能知道它所属的类.拥有哪些方法. 反射是指在PHP运行状态中,扩展分析PHP程序,导出或提出关于类.方法.属性.参数 ...
- C#添加PDF页眉——添加文本、图片到页眉
页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...
- 基本数据类型 int float str
一.数字型1.整型 int======================================基本使用======================================1.用途 用来 ...
- 修改SublimeText3插件Emmet生成HTML中lang属性的默认值
打开Preferences → Package Settings → Emmet → Settings-User,输入如下代码并保存: { "snippets": { " ...
- EditText超出字数限制,给用户提示
当我们在Editext输入内容的时候,检测如果超过限制的长度无法输入内容,并且给用户提示. 首先我想到了下面的方法: editText.addTextChangedListener(new TextW ...
- 小程序实践(十一):showModal的使用
显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...
- Android相机启动crash错误排查
一个Android的用到相机的service程序,在比较少的情况下会出现在系统启动时crash.log显示是在调用ACameraDevice_createCaptureSession时返回错误ACAM ...
- ubuntu 通过apt安装jdk
需要先添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 安装jdk8 sudo apt-get instal ...
- Windows2012R2 NTP时间同步
Windows2012R2 NTP时间同步 Windows2012R2里没有了internet时间,需要使用另外的方式去做时间同步 下面分两个情况 两个情况,两个情况都需要用修改组策略的方式来做 情况 ...
- Java 位运算符和 int 类型的实现
Java 位运算符和 int 类型的实现 其他运算符 # 算术运算符 +.-.*./.++i.i++.--i.i-- # 关系运算符 ==.!=.>.<.>=.<= # 逻辑运 ...