Vue 原生页面触底加载
效果图效果链接网站Kinghiee核心代码要想实现触底加载,第一步写监听鼠标滑动事件,并监听上图为触底加载的原理图。当窗口高度加上页面高度大于图片的高度(黑色小框)时,开始加载图片methods:{scroll() {let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scro
·
效果图
效果链接网站Kinghiee
核心代码
要想实现触底加载,第一步写监听鼠标滑动事件,并监听
上图为触底加载的原理图。
当窗口高度加上页面高度大于图片的高度(黑色小框)时,开始加载图片
methods:{
scroll() {
let scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//页面滚动高度
let windowHeight=window.innerHeight;//窗口高度
let card_sectionTop=card_section.offsetTop;//card_section距离顶部的偏移高度(card_section为你的照片或div元素ID)
let card_sectionHeight=card_section.offsetHeight;//card_section的高度
if(card_sectionTop+card_sectionHeight<scroll+windowHeight){
//这里开始的你请求操作或者是显示数据
}
}
}
监听
mounted(){
window.addEventListener('scroll', this.scroll,false);
},
更多推荐
已为社区贡献5条内容
所有评论(0)