移动端如何用下拉刷新的方式实现上拉加载


Posted in Javascript onDecember 10, 2018

实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样?

html结构

<div class="main-box" id="box1">
  <div class="popup-box">
  </div>
</div>
<div class="main-box" id="box2">
  <div class="popup-box">
  </div>
</div>

这里我们做了两个主要的盒子,在两个盒子内实现上拉加载。结构很简单。

css样式

* {
      margin: 0;
      padding: 0;
    }
    .main-box {
      background: skyblue;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .popup-box {
      width: 100%;
    }
    .item {
      width: 100%;
      line-height: 40px;
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
    }
    .tips{
      text-align: center;
    }
    #box2 {
      margin-top: 50px;
    }

最外面的盒子设置overflow: hidden;中间盒子不设置高度,靠子盒子item撑起。

js代码

/*下拉加载*/
  function tDscroll(obj) {
    this.key = true;         //防止重复的请求
    this.dom = obj.dom;        //传入的dom
    this.fn = obj.fn;         //回调函数
    this.outDom = this.dom.querySelector(".popup-box"); //获取内容盒子
    this.showHeight = dom.offsetHeight;         //显示的高度
    this.actualHeight = this.outDom.offsetHeight;       //获取实际高度的内容
    this.startY = 0;                //起始点击位置
    this.changedY = 0;               //手指移动的距离
    this.originY = 0;               //偏移量
    var that = this;
    this.dom.addEventListener("touchstart",function (ev) {
      that.onStart(ev);
    });
    this.dom.addEventListener("touchmove",function (ev) {
      that.onMove(ev);
    });
    this.dom.addEventListener("touchend",function (ev) {
      that.onEnd(ev);
    });
    this.fn.call(this,this.outDom);
  };

  tDscroll.prototype.onStart = function (ev) {
    this.startY = ev.targetTouches[0].clientY;
    var tempArr = window.getComputedStyle(this.outDom).transform.split(",");
    if (tempArr.length > 2) {
      this.originY = parseInt(tempArr[tempArr.length - 1]) || 0;
    }
  };

  tDscroll.prototype.onMove = function (ev) {
    this.changedY = ev.touches[0].clientY - this.startY;
    var changNum = (this.originY + this.changedY);
    var scrollHeight = -changNum + this.showHeight;
    if (changNum > 50)return;
    if (scrollHeight > this.actualHeight + 50)return;
    if (scrollHeight > this.actualHeight - 50 && this.key) {
      this.fn.call(this,this.outDom);
    }
    this.outDom.style.cssText = "transform: translateY(" + changNum + "px);";
  };

  tDscroll.prototype.onEnd = function() {
    if ((this.originY + this.changedY) > 50 ) {
      this.outDom.style.cssText = "transform: translateY(0px);transition:all .3s";
    }
    if (-(this.originY + this.changedY) + this.showHeight > this.actualHeight + 50) {
      this.outDom.style.cssText = "transform: translateY(-"+(this.actualHeight - this.showHeight)+"px);transition:all .3s";
    }
  };


  var dom = document.querySelector("#box1");  //获取dom
  var dom2 = document.querySelector("#box2");  //获取dom
  var obj = {
    dom : dom,
    fn : add
  };
  var obj2 = {
    dom : dom2,
    fn : add
  };
  new tDscroll(obj);
  new tDscroll(obj2);
  var page = 0;          //当前的页数(模拟用)

  // 模拟ajax
  function add(outDom) {
    var that = this;
    this.key = false;
    var str = "";
    for (var i = 1;i < 11;i++) {
      str+="<div class='item'>"+(i+((page)*10))+"</div>"
    }
    page++;
    setTimeout(function () {
      var tips = outDom.querySelector(".tips");       //获取提升
      tips && outDom.removeChild(tips); //如果不是第一次 添加
      str += "<div class='tips'>加载更多</div>";
      outDom.innerHTML += str;
      that.actualHeight = outDom.offsetHeight;
      that.key = true;
    },2000)
  }

原理也是很简单,监听手势事件判断是否距离足够,足够就可以添加数据啦~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
javascript正则表达式总结
Feb 29 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 #Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 #jQuery
微信小程序实现动态获取元素宽高的方法分析
Dec 10 #Javascript
PM2自动部署代码步骤流程总结
Dec 10 #Javascript
vue路由前进后退动画效果的实现代码
Dec 10 #Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 #Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 #Javascript
You might like
PHP页面间传递参数实例代码
2008/06/05 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
探讨php中header的用法详解
2013/06/07 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
web 页面分页打印的实现
2009/06/22 Javascript
chrome原生方法之数组
2011/11/30 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
详解React 条件渲染
2020/07/08 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
python中pip的安装与使用教程
2018/08/10 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
英文自荐信常用句子
2014/03/26 职场文书
李白故里导游词
2015/02/12 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android