移动端如何用下拉刷新的方式实现上拉加载
时间:2018-12-10
这篇文章主要介绍了移动端如何用下拉刷新的方式实现上拉加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是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) }
原理也是很简单,监听手势事件判断是否距离足够,足够就可以添加数据啦~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 【编程题】Java编程题一(10道)
- 【学习笔记】springboot教程(1)第一个demo
- Hyperledger Fabric 积分代币上链方案
- MySQL中的事务和锁简单测试(r10笔记第46天)
- 数据库无响应问题的紧急处理和分析 (r10笔记第42天)
- 【转载】记Golang数据库查询封装的坑
- Golang 基本语法学习笔记之流程控制
- Go 语言的演化历程
- JS 评分五角星随鼠标移动显示
- Golang标准库学习——buffio包 ---转
- 【Go 语言社区】Go语言条件变量的两个例子
- mysqlimport导入报错的排查(r10笔记第58天)
- 【Go 语言社区】POJ 1047 Round and Round We Go 循环数新解
- 【Go 语言社区】删除redis所有KEY
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法