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 XML操作 封装类
Jul 01 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
微信小程序选择图片控件
Jan 19 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
在数据量大(超过10万)的情况下
2007/01/15 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python中max函数用法实例分析
2015/07/17 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python实现的购物车功能示例
2018/02/11 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Django如何将URL映射到视图
2019/07/29 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python中round函数如何使用
2020/06/19 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
python文件路径操作方法总结
2020/12/21 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
普通大学毕业生自荐信范文
2014/02/23 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
迎新生晚会主持词
2015/06/30 职场文书