h5+vue页面下滑查看更多页面触底+页面滑动

h5页面触底，不足一屏触发滑动 超过一屏触发触底效果

解决 页面大屏正好一屏，小屏超过一屏 页面下滑查看更多 的问题

解决方法1 超过一屏监听滚动 触底触发 小于或等于一屏监听触摸 上滑触发

data() { return { startY: 0, endY: 0, Fullscreen: true }; },

添加触摸事件

//给触摸区域添加触摸事件 <div @touchstart="touchstart()" @touchend="touchend()"></div> //事件 touchstart() { if (!this.Fullscreen) { return; //判断 可视化的高度与溢出的距离 是否大于一屏 Fullscreen满屏 } event.preventDefault(); //阻止默认事件（长按的时候出现复制） this.startY = event.changedTouches[0].pageY; console.log(this.startY); }, touchend() { if (!this.Fullscreen) { return; } event.preventDefault(); this.endY = event.changedTouches[0].pageY; if (this.startY - this.endY > 200) { console.log(this.endY); console.log(this.startY); //达到条件触发事件 this.onscroll(); } },

监听页面滚动

mounted() { window.addEventListener("scroll", this.getScroll); let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度 let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度） if (windowHeight < scrollHeight) { this.Fullscreen = false;//是否满屏 } }, destroyed() { window.removeEventListener("scroll", this.getScroll); }, //监听滚动 getScroll() { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量scrollTop是滚动条滚动时，距离顶部的距离 let windowHeight = document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度 let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度） console.log(scrollTop, windowHeight, scrollHeight); //滚动条到底部的条件 if (scrollTop + windowHeight >= scrollHeight) { //触发事件 } }