JQuery插件iScroll实现下拉刷新,滚动翻页特效


Posted in Javascript onJune 22, 2014

JQuery插件:iScroll

页面布局:

<div id="wrapper">
  <div id="scroller">
   <div id="pullDown">
    <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
   </div>
   <ul id="thelist">
    <li>
     <img src="img/page1_img1.jpg" />
    </li>
    <li>
     <img src="img/page1_img2.jpg" />
    </li>
    <li>
     <img src="img/page1_img3.jpg" />
    </li>
    <li>
     <img src="img/page1_img1.jpg" />
    </li>
    <li>
     <img src="img/page1_img2.jpg" />
    </li>
    <li>
     <img src="img/page1_img3.jpg" />
    </li>
   </ul>
   <div id="pullUp">
    <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
   </div>
  </div>

翻页,是通过ajax请求,把页码传入一般处理程序,在一般处理程序中获得分页后的数据返回json数组对象。

下拉刷新:

/**
  * 下拉刷新 (自定义实现此方法)
  * myScroll.refresh(); // 数据加载完成后,调用界面更新方法
  */
  function pullDownAction() {
   setTimeout(function () { 
    var el, li, i;
    el = document.getElementById('thelist');
    //==========================================
    $.ajax({
     type: "GET",
     url: "LoadMore.ashx",
     data: { page: generatedCount },
     dataType: "json",
     success: function (data) {
      var json = data;
      $(json).each(function () {
       li = document.createElement('li');
       // li.innerText = 'Generated row ' + (++generatedCount);
       li.innerHTML = '<img src="' + this.src + '"/>';
       el.insertBefore(li, el.childNodes[0]);
      })
     }
    });
    myScroll.refresh(); //数据加载完成后,调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)
   }, 1000);  // <-- Simulate network congestion, remove setTimeout from production!
  }

上拉刷新

function pullUpAction() {
   setTimeout(function () {  
    var el, li, i;
    el = document.getElementById('thelist');
    //==========================================
    $.ajax({
     type: "GET",
     url: "LoadMore.ashx",
     data: { page: generatedCount },
     dataType: "json",
     success: function (data) {
      var json = data;
      $(json).each(function () {
       li = document.createElement('li');
       //  li.innerText = 'Generated row ' + (++generatedCount);
       li.innerHTML = '<img src="' + this.src + '"/>;     
       el.insertBefore(li, el.childNodes[0]);
      })
     }
    });
    //============================================
    myScroll.refresh(); // 数据加载完成后,调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
   }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
  }

初始化

/**
  * 初始化iScroll控件
  */
  function loaded() {
   pullDownEl = document.getElementById('pullDown');
   pullDownOffset = pullDownEl.offsetHeight;
   pullUpEl = document.getElementById('pullUp');
   pullUpOffset = pullUpEl.offsetHeight;
   myScroll = new iScroll('wrapper', {
    scrollbarClass: 'myScrollbar', /* 重要样式 */
    useTransition: false,
    topOffset: pullDownOffset,
    onRefresh: function () {
     if (pullDownEl.className.match('loading')) {
      pullDownEl.className = '';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
     } else if (pullUpEl.className.match('loading')) {
      pullUpEl.className = '';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
     }
    },
    onScrollMove: function () {
     if (this.y > 5 && !pullDownEl.className.match('flip')) {
      pullDownEl.className = 'flip';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
      this.minScrollY = 0;
     } else if (this.y < 5 && pullDownEl.className.match('flip')) {
      pullDownEl.className = '';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
      this.minScrollY = -pullDownOffset;
     } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
      pullUpEl.className = 'flip';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
      this.maxScrollY = this.maxScrollY;
     } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
      pullUpEl.className = '';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
      this.maxScrollY = pullUpOffset;
     }
    },
    onScrollEnd: function () {
     if (pullDownEl.className.match('flip')) {
      pullDownEl.className = 'loading';
      pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
      pullDownAction(); // Execute custom function (ajax call?)
     } else if (pullUpEl.className.match('flip')) {
      pullUpEl.className = 'loading';
      pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
      pullUpAction(); // Execute custom function (ajax call?)
     }
    }
   });
   setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
  }
  //初始化绑定iScroll控件 
  document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
  document.addEventListener('DOMContentLoaded', loaded, false);
Javascript 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
js实现导航吸顶效果
Feb 24 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
Window.Open如何在同一个标签页打开
Jun 20 #Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 #Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 #Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 #Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 #Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 #Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 #Javascript
You might like
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php函数与传递参数实例分析
2014/11/15 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
写好自荐信的要点
2013/11/06 职场文书
西式结婚主持词
2014/03/14 职场文书
经典促销广告词大全
2014/03/19 职场文书
期中考试反思800字
2014/05/01 职场文书
课外小组活动总结
2014/08/27 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python