上拉刷新,下拉加载更多。。。仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法:

(如果不好使,调试你的css,想必是个很蛋疼的问题,给点提示 :#wrapper,以及#scroller-content要注意)

html如下:

  1. <div class="viewport">
  2. <div id="wrapper" class="wrapper">
  3. <div id="scroller">
  4. <div id="scroller-pullDown">
  5. <span id="down-icon" class="pull-down-icon fa fa-refresh fa-spin fa-fw"></span>
  6. <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
  7. </div>
  8. <div id="scroller-content">
  9. //你写的内容在这里
  10. </div>
  11. <div id="scroller-pullUp">
  12. <span id="up-icon" class="pull-up-icon fa fa-spinner fa-spin fa-fw"></span>
  13. <span id="pullUp-msg" class="pull-up-msg">上拉加载</span>
  14. </div>
  15. </div>
  16. </div>
  17. </div>

css如下:

  1. /* =================iscroll================================= */
  2.  
  3. #wrapper {
  4. position: absolute;
  5. z-index:;
  6. top: 210*@size;
  7. bottom: 0px;
  8. left:;
  9. width: 100%;
  10. overflow: hidden;
  11. }
  12.  
  13. #scroller {
  14. position: absolute;
  15. z-index:;
  16. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  17. width: 100%;
  18. -webkit-transform: translateZ(0);
  19. -moz-transform: translateZ(0);
  20. -ms-transform: translateZ(0);
  21. -o-transform: translateZ(0);
  22. transform: translateZ(0);
  23. -webkit-touch-callout: none;
  24. -webkit-user-select: none;
  25. -moz-user-select: none;
  26. -ms-user-select: none;
  27. user-select: none;
  28. -webkit-text-size-adjust: none;
  29. -moz-text-size-adjust: none;
  30. -ms-text-size-adjust: none;
  31. -o-text-size-adjust: none;
  32. text-size-adjust: none;
  33. }
  34.  
  35. #scroller-pullDown,
  36. #scroller-pullUp {
  37. background: #333333;
  38. height: 50px;
  39. line-height: 50px;
  40. border-bottom: 1px solid #ccc;
  41. font-weight: bold;
  42. font-size: 14px;
  43. color: #888;
  44. text-align: center;
  45. position: absolute;
  46. left: 0px;
  47. width: 100%;
  48. }
  49.  
  50. #scroller-pullDown {
  51. top: -50px;
  52. }
  53.  
  54. #scroller-pullUp {
  55. bottom: -50px;
  56. }
  57.  
  58. .pull-up-msg,
  59. .pull-down-msg {
  60. padding-left: 5px;
  61. position: relative;
  62. top: 0px;
  63. }
  64.  
  65. #scroller-pullDown .pull-down-icon,
  66. #scroller-pullUp .pull-up-icon {
  67. display: inline-block;
  68. color: #e84c3d;
  69. font-size: 16px;
  70. }

js代码看这里:

  1. function pushData(m) {
  2. var m = m || 10;
  3. if (flag) {
    //发送Ajax,循环自己的数据加载:
  4. $.myGET(uri, {formData}, function (data) {
  5. if (data.result) {
  6. for (var i = 0; i < data.package.length; i++) {
  7. data.package[i].isPass ? data.package[i].isPass = "pass" : data.package[i].isPass = "unpass";
  8. 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>';
  9. $("#target").append(temp);
  10. }
  11. if (m * n > data.total) {
  12. $("#pullUp-msg").text("已无更多数据");
  13. flag = false;
  14. return false;
  15. }
  16. }
  17.  
  18. }
  19.  
  20. (function(window) {
  21. var myScroll,
  22. upIcon = $("#up-icon"),
  23. downIcon = $("#down-icon"),
  24. target = $("#target"),
  25. temp = " ";
  26.  
  27. myScroll = new IScroll('#wrapper', {
  28. probeType: 3,
  29. mouseWheel: true
  30. });
  31.  
  32. myScroll.on("scroll", function() {
  33. var y = this.y,
  34. maxY = this.maxScrollY - y,
  35. downHasClass = downIcon.hasClass("reverse_icon"),
  36. upHasClass = upIcon.hasClass("reverse_icon");
  37.  
  38. if (y >= 40) {
  39. !downHasClass && downIcon.addClass("reverse_icon");
  40. return "";
  41. } else if (y < 40 && y > 0) {
  42. downHasClass && downIcon.removeClass("reverse_icon");
  43. return "";
  44. }
  45.  
  46. if (maxY >= 40) {
  47. !upHasClass && upIcon.addClass("reverse_icon");
  48. return "";
  49. } else if (maxY < 40 && maxY >= 0) {
  50. upHasClass && upIcon.removeClass("reverse_icon");
  51. return "";
  52. }
  53. });
  54. //下拉逻辑在这里!
  55. myScroll.on("slideDown", function() {
  56. if (this.y > 40) {
  57. window.location.reload();
  58. }
  59. });
  60.  
  61. //上拉逻辑在这里!
  62. myScroll.on("slideUp", function() {
  63. if (this.maxScrollY - this.y > 40) {
  64. pushData();
  65. myScroll.refresh();
  66. }
  67. });
  68.  
  69. })(window)

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战的更多相关文章

  1. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  2. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  3. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  4. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  5. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  6. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

  7. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  8. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  9. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

  10. 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析

    注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...

随机推荐

  1. PHP反射原理的实现

    反射 反射,直观理解就是根据到达地找到出发地和来源.我们可以仅仅通过一个光秃秃对象就能知道它所属的类.拥有哪些方法. 反射是指在PHP运行状态中,扩展分析PHP程序,导出或提出关于类.方法.属性.参数 ...

  2. C#添加PDF页眉——添加文本、图片到页眉

    页眉常用于显示文档的附加信息,我们可以在页眉中插入文本或者图形,例如,页码.日期.公司徽标.文档标题.文件名或作者名等等.那么我们如何以编程的方式添加页眉呢?今天,这篇文章向大家分享如何使用了免费组件 ...

  3. 基本数据类型 int float str

    一.数字型1.整型 int======================================基本使用======================================1.用途 用来 ...

  4. 修改SublimeText3插件Emmet生成HTML中lang属性的默认值

    打开Preferences → Package Settings → Emmet → Settings-User,输入如下代码并保存: { "snippets": { " ...

  5. EditText超出字数限制,给用户提示

    当我们在Editext输入内容的时候,检测如果超过限制的长度无法输入内容,并且给用户提示. 首先我想到了下面的方法: editText.addTextChangedListener(new TextW ...

  6. 小程序实践(十一):showModal的使用

    显示模态对话框,确定和取消两个选择+标题+内容的对话框 . // 编辑用户性别 tapSex:function(res){ var that = this wx.showModal({ title: ...

  7. Android相机启动crash错误排查

    一个Android的用到相机的service程序,在比较少的情况下会出现在系统启动时crash.log显示是在调用ACameraDevice_createCaptureSession时返回错误ACAM ...

  8. ubuntu 通过apt安装jdk

    需要先添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 安装jdk8 sudo apt-get instal ...

  9. Windows2012R2 NTP时间同步

    Windows2012R2 NTP时间同步 Windows2012R2里没有了internet时间,需要使用另外的方式去做时间同步 下面分两个情况 两个情况,两个情况都需要用修改组策略的方式来做 情况 ...

  10. Java 位运算符和 int 类型的实现

    Java 位运算符和 int 类型的实现 其他运算符 # 算术运算符 +.-.*./.++i.i++.--i.i-- # 关系运算符 ==.!=.>.<.>=.<= # 逻辑运 ...