移动端如何用下拉刷新的方式实现上拉加载
程序员文章站
2022-03-13 17:10:53
实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是transform属性来进行位移,那用下拉刷新的方式实现上拉加载怎么样?
html结构...
实现上拉加载最普遍的方式就是监听滚动条的滚动事件,而移动端的下拉刷新利用的是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) }
原理也是很简单,监听手势事件判断是否距离足够,足够就可以添加数据啦~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Python之路-基础数据类型之字符串
下一篇: webpack优化的深入理解