怎样分辨翻转是不是翻转到了底部?
最先要掌握的专业知识 scrollHeight
,clientHeight
,scrollTop
scrollHeight
写保护特性,高宽比包含全部內容,包括内边距,但不把水平翻转条、边框和外边距算在内。
clientHeight
也是写保护特性,沒有界定CSS
或内联合理布局盒子的元素为0,它是元素內部的高宽比,包括内边距,不包含x轴的翻转条高宽比、边框、外边距;
同1种型号规格的手机上上是不会改变的。
scrollTop
这个元素的顶部翻转间距(到视口(1般全是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)]; //页数加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() }) }) }) } }
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。