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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
Script的加载方法小结
Jan 12 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 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实现的简单数据库操作Model类
2016/11/16 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
java script编程起步(第三课)
2007/01/10 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JavaScript—window对象使用示例
2013/12/09 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
简单使用Python自动生成文章
2014/12/25 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
计算机专业自荐信
2013/10/14 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
同学会感言
2015/07/30 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
PHP设计模式(观察者模式)
2021/07/07 PHP