移动端html5判断是否滚动到底部并且下拉加载_html5_网页制作

这篇文章主要介绍了移动端html5判断是否滚动到底部并且下拉加载，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

如何判断滚动是否滚动到了底部?

首先要了解的知识 scrollHeight,clientHeight,scrollTop

scrollHeight

只读属性,高度包括所有内容，包含内边距，但不把水平滚动条、边框和外边距算在内。

clientHeight

也是只读属性，没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度，包含内边距，不包括x轴的滚动条高度、边框、外边距;

同一种型号的手机上是不变的。

scrollTop

这个元素的顶部滚动距离(到视口(一般都是html)的顶部的距离)。

可以实现计算到底部的距离了

计算是否到达底部原生js

element.scrollHeight – element.scrollTop === element.clientHeight

jquery

element..scrollHeight – element.scrollTop() == element.height()

实现下拉刷新

用到的是html+jq

var loadingState = {
text:false,
image:false,
video:false
}

var httpUrl2 = "https://api.apiopen.top/getJoke"
var options1 = {
page:1,
count:10,
type:"text"
}
var options2 = {
page:1,
count:10,
type:"image"
}
var options3 = {
page:1,
count:10,
type:"video"
}

//在window里获取不到options,就只能把options放在data对象里，就能用data[\’options\’+(index+1)]获取到了
var data = {
options1,options2,options3
}

//请求语句所在
loadingState.text = true;
textRender(options1);

//监听要滑动容器的滚动事件
$(\’.content\’).scroll(function(e){
var index = $(this).index();
//获取滚动的距离
var sTop = $(\’.content\’).eq(index).scrollTop();
//获取容器的高度
var contentHeight = $(\’.content\’).eq(index).height();
//获取滚动高度
var scrollHeight = $(\’.content\’).eq(index)[0].scrollHeight;
//根据所选的不同options加载不同的内容
if(index==$(this).index()&&loadingState.text!=true) {
//判断是否已经滚动底
if((sTop+contentHeight)==scrollHeight){
//当到达底部是加载选项为true,之后的操作
loadingState.text = true;
//内容缓慢淡出
$(this).animate({
scrollTop:sTop+80
},1000)
var options = data[\’options\’+(index+1)];
//页数加一
options.page += 1;
//加载新获取的内容
textRender(options);
}
}
}

//加载实现函数
funtion textRender(obj){
//要添加的内容
if(obj == options1){
console.log(obj);
$.get(httpUrl2,obj).then(function(res){
res.result.forEach(function(item,i){
var html = `
<div class="mui-card">
<div class="mui-card-header mui-card-media">
<img src="${item.header}">
<div class="mui-media-body">
${item.name}
<p>发表于 ${item.passtime}</p>
</div>

</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>${item.text}</p>
</div>
</div>
<div class="mui-card-footer">
<a class="mui-card-link">喜欢</a>
<a class="mui-card-link">评论</a>
</div>
</div>
`
$(\’.content:eq(0)\’).append(html).css(\’backgroundImage\’,"none")
loadingState.text = false;
$(\’.loading.text\’).stop(true).slideUp(2000,function(){
$(\’.loading.text\’).remove()
})
})
})
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持3399IT网。

本文为网络共享文章，如有侵权请联系邮箱485837881@qq.com