vue 实现 web端滚动刷新

想实现web端的滚动刷新，我们需要判断滚动已经到达最低部，利用addEventListener监听滚动高度，触发相应的回调函数，激发加载更多数据，那么我们该怎样计算滚动已经到达底部了呢?

首先我们需要获取到整个可视区域高度clientHeight
clientHeight
内容可视区域的高度，也就是说页面浏览器可以看到内容的这个区域的高度，但要注意padding是算在内的。

获取整个文档的高度scrollHeight
scrollHeight 文档内容实际高度

获取滚动的距离scrollTop
scrollTop 获取滚动的垂直距离

思路:

整个文档的高度 -  可视区域高度 - 滚动的距离 为 0 时候 说明 到底部了

代码部分:l

<!--            底部加载图片--><div class="hidden_img" v-customShow="imgShow"><img  width="15%" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594203057728&di=b98734df67bbe297b4ac80154751a3a3&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%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 即使不可见的元素也会占据页面上的空间
底部会留白，但是不影响哈

自定义指令：
inserted:只有在插入时候触发只用一次更新不会触发，接收了两个参数 – 1. el 是获取到当前的元素
2. binging是当前元素的所有信息
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';}}}}

这里只是阐述了滚动刷新和自定义指令，点击查看源码

https://blog.csdn.net/weixin_46034375/article/details/107210633