H5基于iScroll实现下拉刷新和上拉加载更多


Posted in Javascript onJuly 18, 2017

前言

      前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据。

使用技巧

      1、引用iScroll.js, 在初始化时添加两个事件监听:touchMove、DOMContentLoaded。

      2、实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。

      3、上拉加载更多请求后台时就相当于分页请求数据,这时候需要在ajax请求时发送pageIndex参数,而初始化加载时需要从后台返回一个pageCount以便前台判断。

      4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。

效果图

 H5基于iScroll实现下拉刷新和上拉加载更多

实现方法

var   myScroll,
  pullDownEl, pullDownOffset,
  pullUpEl, pullUpOffset,
  generatedCount = 0;
 
/**
 * 下拉刷新 (自定义实现此方法)
 * myScroll.refresh(); 数据加载完成后,调用界面更新方法
 */
function pullDownAction () {
  setTimeout(function () {  
    var el, li, i;
    el = document.getElementById('thelist');
 
    for (i=0; i<3; i++) {
      li = document.createElement('li');
      li.innerText = 'Generated row ' + (++generatedCount);
      el.insertBefore(li, el.childNodes[0]);
    }
     
    myScroll.refresh();   //数据加载完成后,调用界面更新方法 
  }, 1000); 
}
 
/**
 * 滚动翻页 (自定义实现此方法)
 * myScroll.refresh();   // 数据加载完成后,调用界面更新方法
 */
function pullUpAction () {
  setTimeout(function () {  // <-- Simulate network congestion, remove setTimeout from production!
    var el, li, i;
    el = document.getElementById('thelist');
 
    for (i=0; i<3; i++) {
      li = document.createElement('li');
      li.innerText = 'Generated row ' + (++generatedCount);
      el.appendChild(li, el.childNodes[0]);
    }
     
    myScroll.refresh();   //数据加载完成后,调用界面更新方法
  }, 1000); 
}
 
/**
 * 初始化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();  // ajax call
      } else if (pullUpEl.className.match('flip')) {
        pullUpEl.className = 'loading';
        pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';        
        pullUpAction(); // 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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
jquery实现显示已选用户
Jul 21 Javascript
javascript快速排序算法详解
Sep 17 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
iscroll动态加载数据完美解决方法
Jul 18 #Javascript
Angular4学习笔记之新建项目的方法
Jul 18 #Javascript
详解使用nvm安装node.js
Jul 18 #Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 #jQuery
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 #Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 #Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 #Javascript
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
vue下载二进制流图片操作
2020/10/26 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python 闭包的使用方法
2017/09/07 Python
Python Flask基础教程示例代码
2018/02/07 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python实现梯度下降算法
2020/03/24 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
大客户销售经理职责
2013/12/04 职场文书
英语自荐信范文
2013/12/11 职场文书
产品促销活动策划书
2014/01/15 职场文书
企业元宵节主持词
2014/03/25 职场文书
《社戏》教学反思
2014/04/15 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
校庆标语集锦
2014/06/25 职场文书
工作检讨书范文
2015/01/23 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js