vue 實現(xiàn) web端滾動刷新

想實現(xiàn)web端的滾動刷新，我們需要判斷滾動已經(jīng)到達(dá)最低部，利用addEventListener監(jiān)聽滾動高度，觸發(fā)相應(yīng)的回調(diào)函數(shù)，激發(fā)加載更多數(shù)據(jù)，那么我們該怎樣計算滾動已經(jīng)到達(dá)底部了呢?

首先我們需要獲取到整個可視區(qū)域高度clientHeight
clientHeight
內(nèi)容可視區(qū)域的高度，也就是說頁面瀏覽器可以看到內(nèi)容的這個區(qū)域的高度，但要注意padding是算在內(nèi)的。

獲取整個文檔的高度scrollHeight
scrollHeight 文檔內(nèi)容實際高度

獲取滾動的距離scrollTop
scrollTop 獲取滾動的垂直距離

思路:

整個文檔的高度 - 可視區(qū)域高度 - 滾動的距離 為 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, // 下拉加載的下標(biāo)}}, mounted() {axios.get('./media/data.json').then(res=>{//保存一個原始數(shù)組this.courselist = res.data.result.list;// 展示商品的數(shù)組this.list = res.data.result.list;//左邊價格的選項this.options = res.data.result.slider;}).catch(err=>{console.log(err)});// 實時獲取 滾動的距離window.addEventListener('scroll',()=>{/* 計算滑動到底部 整個文檔的高度 = 可視區(qū)域高度 + 滾動的距離*///獲取滾動的距離let scrollHeight = document.documentElement.scrollTop;//獲取整個文檔的高度let docHeight = document.documentElement.scrollHeight;//可視區(qū)域高度let seeHeight = document.documentElement.clientHeight;// 整個文檔的高度 - 可視區(qū)域高度 - 滾動的距離 === 0 時候 說明 到底部了if(docHeight - seeHeight - scrollHeight < 1) {//loading加載出現(xiàn)this.imgShow = true;//計時器 3秒后loading隱藏 數(shù)據(jù)請求回來加入數(shù)組window.setTimeout(()=>{//我們的json數(shù)據(jù)只到 3 所以在這里判斷一下if(this.i === 4 ) {this.imgShow = false;return;}//loading 隱藏this.imgShow = false;//axios請求 jsonaxios.get(`./media/data${this.i}.json`).then(res=>{//擴(kuò)展運算符 賦值給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 是自定義指令 來控制加載圖標(biāo)的顯示和隱藏

不用v-if 和v-show 的原因:
v-if判斷該元素是否存在 v-show是通過display:none/block來實現(xiàn)對元素的顯示和隱藏
當(dāng)我們滾動到底部的時候，雖然加載的圖標(biāo)會出現(xiàn)，3秒后會隱藏，但是會隔3秒觸發(fā)一次請求，bug出現(xiàn)了。

bug演示:

所以我們用自定義指令，通過改變元素的visibility屬性
小貼士:visibility 即使不可見的元素也會占據(jù)頁面上的空間
底部會留白，但是不影響哈

自定義指令：
inserted:只有在插入時候觸發(fā) 只用一次 更新不會觸發(fā)，接收了兩個參數(shù) – 1. el 是獲取到當(dāng)前的元素
2. binging是當(dāng)前元素的所有信息
update:更新的時觸發(fā)

代碼：

// 自定義指令directives:{customShow:{ //自定義指令的名字bind(){},// 只有在插入時候觸發(fā) 只用一次 更新不會觸發(fā) 我們每次會改變ture false 所以要在更新時寫一遍inserted(el,binding){if(binding.value) {el.style.visibility = 'visible';}else {el.style.visibility = 'hidden';}},// true false 更新的時觸發(fā)update(el,binging){// el 是獲取到當(dāng)前的元素 binging是當(dāng)前元素的所有信息if(binging.value) {el.style.visibility = 'visible';}else {el.style.visibility = 'hidden';}}}}

這里只是闡述了滾動刷新和自定義指令，點擊查看源碼

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

總結(jié)

以上是生活随笔為你收集整理的vue 实现 web端滚动刷新 自定义指令的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。