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 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
ASP SQL防注入的方法
Dec 25 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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获取文件名后缀
2013/06/09 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
php验证码生成器
2017/05/24 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
2018/09/30 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
python实现聊天小程序
2018/03/13 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
python实现合并两个排序的链表
2019/03/03 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
详解python itertools功能
2020/02/07 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
RealTek面试题
2016/06/28 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
工商技校毕业生自荐信
2013/11/15 职场文书
办理信用卡工作证明
2014/01/11 职场文书
给校长的一封建议书
2014/03/12 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
省级青年文明号申报材料
2014/05/23 职场文书