vue 实现 web端滚动刷新
想实现web端的滚动刷新，我们需要判断滚动已经到达最低部，利用addEventListener监听滚动高度，触发相应的回调函数，激发加载更多数据，那么我们该怎样计算滚动已经到达底部了呢?
首先我们需要获取到整个可视区域高度clientHeight
clientHeight
内容可视区域的高度，也就是说页面浏览器可以看到内容的这个区域的高度，但要注意padding是算在内的。
获取整个文档的高度scrollHeight
scrollHeight文档内容实际高度
获取滚动的距离scrollTop
scrollTop获取滚动的垂直距离
思路:
整个文档的高度 - 可视区域高度 - 滚动的距离 为 0 时候 说明 到底部了
代码部分:l
<!-- 底部加载图片--><div class="hidden_img" v-customShow="imgShow"><img width="15%" src="/timg?image&quality=80&size=b9999_10000&sec=1594203057728&di=b98734df67bbe297b4ac80154751a3a3&imgtype=0&src=http%3A%2F%2Fhbimg.%2F73d00f8e9b5e91aaf8ca7f8fc8c1746b33acb0d563c3d-2lSOZj_fw658"></div>
js代码:
data(){return{imgShow:false, //自定义指令i:2, // 下拉加载的下标}},
mounted() {axios.get('./media/data.json').then(res=>{//保存一个原始数组this.courselist = res.data.result.list;// 展示商品的数组this.list = res.data.result.list;//左边价格的选项this.options = res.data.result.slider;}).catch(err=>{console.log(err)});// 实时获取 滚动的距离window.addEventListener('scroll',()=>{/* 计算滑动到底部 整个文档的高度 = 可视区域高度 + 滚动的距离*///获取滚动的距离let scrollHeight = document.documentElement.scrollTop;//获取整个文档的高度let docHeight = document.documentElement.scrollHeight;//可视区域高度let seeHeight = document.documentElement.clientHeight;// 整个文档的高度 - 可视区域高度 - 滚动的距离 === 0 时候 说明 到底部了if(docHeight - seeHeight - scrollHeight < 1) {//loading加载出现this.imgShow = true;//计时器 3秒后loading隐藏 数据请求回来加入数组window.setTimeout(()=>{//我们的json数据只到 3 所以在这里判断一下if(this.i === 4 ) {this.imgShow = false;return;}//loading 隐藏this.imgShow = false;//axios请求 jsonaxios.get(`./media/data${this.i}.json`).then(res=>{//扩展运算符 赋值给listthis.list = [...this.list,...res.data.result.list];}).catch(err=>{console.log(err)});this.i++;},3000)}/*console.log(scrollHeight + '滚动距离')console.log(docHeight + '文档高度')console.log(seeHeight + '可视') */})},
自定义指令
在上面用的imgShow是自定义指令 来控制加载图标的显示和隐藏
不用v-if和v-show的原因:
v-if判断该元素是否存在v-show是通过display:none/block来实现对元素的显示和隐藏
当我们滚动到底部的时候，虽然加载的图标会出现，3秒后会隐藏，但是会隔3秒触发一次请求，bug出现了。
bug演示:
所以我们用自定义指令，通过改变元素的visibility属性
小贴士:visibility即使不可见的元素也会占据页面上的空间
底部会留白，但是不影响哈
自定义指令：
2. binging是当前元素的所有信息inserted:只有在插入时候触发 只用一次 更新不会触发，接收了两个参数 – 1. el 是获取到当前的元素
update:更新的时触发
代码：
// 自定义指令directives:{customShow:{ //自定义指令的名字bind(){},// 只有在插入时候触发 只用一次 更新不会触发 我们每次会改变ture false 所以要在更新时写一遍inserted(el,binding){if(binding.value) {el.style.visibility = 'visible';}else {el.style.visibility = 'hidden';}},// true false 更新的时触发update(el,binging){// el 是获取到当前的元素 binging是当前元素的所有信息if(binging.value) {el.style.visibility = 'visible';}else {el.style.visibility = 'hidden';}}}}
这里只是阐述了滚动刷新和自定义指令，点击查看源码
/weixin_46034375/article/details/107210633
