链接：https://www.jianshu.com/p/a8392115e6f0演示地址：http://wonghan.cn/iscroll-demo/html:<body>
  <div id="app">
    <header id="header">
      <input type="text" id="input">
      <input type="submit" id="submit">
    </header>
    <article id="article">
      <ul id="ul">
        <li class="li" id="text">下拉刷新</li>
        <li class="li">1</li>
        <li class="li">2</li>
        <li class="li">3</li>
        <li class="li">4</li>
        <li class="li">5</li>
        <li class="li">6</li>
        <li class="li">7</li>
        <li class="li">8</li>
        <li class="li">9</li>
        <li class="li">10</li>
      </ul>
    </article>
  </div>
</body>

css:
#article{
    overflow: scroll;
    position: relative;
}
#ul{
    position: absolute;
}

上拉加载：
let ul = document.getElementById('ul');  // 获取ul列表
let div = document.getElementById('article') // 获取包裹ul列表的div(css:  overflow:scroll;)
let num = 11; // 要添加的li文本，可自定义
let isLoad = false; // 节流阀辅助变量

// 添加li的方法，可自定义
function addLi() {
  let fragment = document.createDocumentFragment();
  for(let i=0;i<10;i++) {
    let li = document.createElement('li');
    li.className = 'li';
    li.innerHTML = num++;
    fragment.appendChild(li); // 用DocumentFragment提高渲染速度
  }
  ul.appendChild(fragment);
}

// 上拉加载
div.addEventListener('scroll',function(){
  if(div.scrollHeight-div.scrollTop<1000 && isLoad===false) {
    isLoad = true;
    addLi();
    setTimeout(function(){
      isLoad = false;
    },300)  //  节流阀
  }
},false);

js:下拉刷新：
let ul = document.getElementById('ul');  // 获取ul列表
let div = document.getElementById('article') // 获取包裹ul列表的div(css:  overflow:scroll;)
let text = document.getElementById('text');  // 写着“下拉刷新”的元素
let start;  // 辅助变量：触摸开始时，相对于文档顶部的Y坐标
let refresh = false;  // 辅助变量：是否刷新

div.addEventListener('touchstart',function(event){
  let touch = event.touches[0];
  start = touch.pageY;  // 辅助变量：触摸开始时，相对于文档顶部的Y坐标
},false);

div.addEventListener('touchmove',function(event){
  // 下拉刷新
  let touch = event.touches[0];
  if(div.scrollTop<=0){
    // 如果ul列表到顶部，修改ul列表的偏移,显示“下拉刷新”，并准备触发下拉刷新功能，可自定义
    ul.style.top = ul.offsetTop + touch.pageY - start +'px'; // ul.style.top = ul.offsetTop + 'px'
    start = touch.pageY;
    // 若ul偏移量过大,则修改文字,refresh置为true,配合'touchend'刷新
    if(ul.offsetTop>=100) {
      text.innerHTML = "释放刷新";
      refresh = true;
    }
  }
},false);

div.addEventListener('touchend',function(event){
  // 若'touchend'时，ul偏移,用setInterval循环恢复ul的偏移量
  if(ul.offsetTop>=0) {
    let time = setInterval(function(){
      ul.style.top = ul.offsetTop -3 +'px';
      // 若ul的偏移量恢复，clearInterval
      if(ul.offsetTop<=0){
        clearInterval(time);
        text.innerHTML = "下拉刷新";
        // 若恢复时'refresh===true',刷新页面
        if(refresh){
          location.reload();
        }
      }
    })
  }
},false);

js：基于原生js的上啦下啦刷新功能的更多相关文章

  1. 基于原生JS封装数组原型上的sort方法

    基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...

  2. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

  3. 基于原生JS的jsonp方法的实现

    基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...

  4. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  5. 基于原生js的图片延迟加载

    当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...

  6. 基于原生js的返回顶部组件，兼容主流浏览器

    基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...

  7. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

随机推荐

  1. windows下Redis的安装和使用

    1.要安装Redis,首先要获取安装包.Windows的Redis安装包需要到以下GitHub链接找到.链接:https://github.com/MSOpenTech/redis.打开网站后,找到R ...

  2. POJ3208 Apocalypse Someday

    题意 Language:Default Apocalypse Someday Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 2 ...

  3. 备份恢复工具xtrabackup安装和使用的记录

    一.安装 下面的方法是在测试环境可以上网的情况下安装的: 提供的是在centos7上安装的方法: 包下载: wget https://www.percona.com/downloads/percona ...

  4. Python中安装MySQL

    Windows 下Python3.6安装 mysql_python 存在各种不成功,切换到 SQLAlchemy也不行需要安装MySQL_python.需要安装mysqlclient. 执行 pip ...

  5. 【转】/etc/rc.d/rc与/etc/rc.d/init.d的关系介绍

    /etc/rc.d/init.d这个目录下的脚本就类似与windows中的注册表,在系统启动的时候执行.程序运行到这里(init进程读取了运行级别),相信从命名的角度大家也能猜到该运行/etc/rc. ...

  6. 浅析MSIL中间语言——基础篇(转)

    来自:https://www.cnblogs.com/dwlsxj/p/MSIL.html 一.开篇 研究MSIL纯属于个人喜好,说在前面MSIL应用于开发的地方很少,但是很大程度上能够帮着我们理解底 ...

  7. 【C++】static关键字的总结

    转自 https://www.cnblogs.com/BeyondAnyTime/p/2542315.html C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的s ...

  8. python 函数内使用自己的函数名

    def p(): import sys print sys._getframe(1).f_code.co_name def f(): p() def f1(): p() if __name__ == ...

  9. problem: 记一次聊天框的表情包弹框不显示的找问题过程

    左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...

  10. global的使用

    对于一个全局变量,你的函数里如果只使用到了它的值,而没有对其赋值(指a = XXX这种写法)的话,就不需要声明global. 相反,如果你对其赋了值的话,那么你就需要声明global.声明global ...