实现上拉加载最普遍的方式就是监听滚动条的滚动事件，而移动端的下拉刷新利用的是transform属性来进行位移，那用下拉刷新的方式实现上拉加载怎么样"htmlcode">
<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)
}
原理也是很简单，监听手势事件判断是否距离足够，足够就可以添加数据啦~~~
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
移动端,上拉加载
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“移动端如何用下拉刷新的方式实现上拉加载”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。