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的表格排序
Sep 11 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
href下载文件根据id取url并下载
May 28 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
Mar 15 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
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实现多级树型菜单
2006/10/09 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
用jscript启动sqlserver
2007/06/21 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python配置grpc环境
2019/01/01 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python调用其他文件函数或类的示例
2019/07/16 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
会计职业生涯规划书
2014/01/13 职场文书
四年级下册教学反思
2014/02/01 职场文书
学生会部长竞聘书
2014/03/31 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
青岛导游词
2015/02/12 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
Python学习之os包使用教程详解
2022/03/21 Python
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers