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


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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
学习Angularjs分页指令
Jul 01 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 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实现mysql同步的实现方法
2009/10/21 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
js post提交调用方法
2014/02/12 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python读写配置文件的方法
2015/06/03 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
大学生应聘推荐信范文
2013/11/19 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技