html5判断手机下滑,移动端html5判断是否滚动到底部并且下拉加载

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 = `

${item.name}

发表于 ${item.passtime}

${item.text}

喜欢

评论

`

$('.content:eq(0)').append(html).css('backgroundImage',"none")

loadingState.text = false;

$('.loading.text').stop(true).slideUp(2000,function(){

$('.loading.text').remove()

})

})

})

}

}