Vue移動端下拉刷新組件如何使用

這篇“Vue移動端下拉刷新組件如何使用”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue移動端下拉刷新組件如何使用”文章吧。

第一種方法應(yīng)該是很方便的一種了 , 就是修改源碼樣式了 , 你可以將以下代碼加入到你的 css 中 , 注意 , 如果你使用的是局部 css , 請使用穿透或者新開一個(gè)全局 style

.van-pull-refresh {
    height: calc(100vh - 100px) !important; // 此處的 100px 需要根據(jù)你的實(shí)際情況來處理 , 是頁面中不包含列表的高度部分
    overflow: auto !important;
}

但是有時(shí)候會出現(xiàn)第一種方法不起作用的情況 , 遇到這種情況 , 我也只能推薦你使用原生方法 scroll 來判斷是否需要進(jìn)行下拉刷新了

第二種就是即時(shí)判斷是否需要下拉刷新了

這種方法的原理就是 當(dāng)列表的 scrollTop 為 0 時(shí) , 說明列表已經(jīng)到頂了 , 到頂了還往下拉說明你就是想要刷新列表 , 如果 scrollTop 不等于 0 那就是列表向下滑動而已

我們看下使用組件時(shí)需要的屬性

<van-pull-refresh
  	v-model="refreshing"	// 表示是否在刷新 , 下拉時(shí)自動變?yōu)?nbsp;true ,需要在請求數(shù)據(jù)結(jié)束后手動設(shè)置為 false
  	@refresh="onRefresh"	// 下拉刷新觸發(fā)的方法 , 將分頁變?yōu)?nbsp;1 然后請求數(shù)據(jù)
  	:disabled="pullRefreshDisabled"	// 是否禁用下拉刷新的方法 , 禁用后將無法下拉刷新 , 通過列表滾動高度來控制這個(gè)值
>
	<van-list
		 v-model:loading="loading"	// 是否處于加載狀態(tài) , 列表滑到最底處時(shí)自動變成 true , 變?yōu)?nbsp;true 時(shí)不會觸發(fā) load 事件方法
		 :finished="finished"	// 是否已經(jīng)加載完成
		 finished-text="沒有更多了" 
		 @load="onLoad" // 加載新數(shù)據(jù)的方法 , 移動端一般傳入新的頁數(shù)將新數(shù)據(jù)數(shù)組添加到原有數(shù)據(jù)數(shù)組之后
		 @scroll="divScroll"	// 滾動時(shí)觸發(fā)的事件 , 來判斷當(dāng)前滾動的高度是多少
	>
		<div v-for="(item, index) in data" :key="index">
			{{ item }}
		</div>
	</van-list>
</van-pull-refresh>

如果都看了上面的注釋 , 那么其實(shí)也很簡單了 , 我們在 divScroll 方法中實(shí)時(shí)監(jiān)控滾動的高度 , 當(dāng)滾動的高度 == 0 的時(shí)候 , 就給下拉刷新組件可以下拉刷新的功能

const pullRefreshDisabled = ref(false)
const divScroll = (e: any) => {
    if (e.target.scrollTop == 0) {
        pullRefreshDisabled.value = false
    } else {
        pullRefreshDisabled.value = true
    }
}

用了這么長時(shí)間 , 我越發(fā)覺得一個(gè) any 走天下了

初始值設(shè)置為 false 是為了一開始就能下拉刷新 , 千萬別搞混 , 這個(gè) pullRefreshDisabled 為 true 時(shí)是不能下拉刷新 , 為 false 時(shí)是可以下拉刷新。

以上就是關(guān)于“Vue移動端下拉刷新組件如何使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。