學(xué)習(xí)關(guān)鍵語(yǔ)句:
vant list組件和下拉刷新
vant 下拉刷新和局部滾動(dòng)沖突

寫(xiě)在前面

每一次 ! 我是說(shuō)每一次我在使用 vant 組件庫(kù)里面 list組件和下拉刷新連在一起用的時(shí)候

都會(huì)出現(xiàn)下拉刷新和列表下滑局部滾動(dòng)的沖突 !

這讓我很 ! 難 ! 受 !

這篇文章提供 來(lái)自于瀏覽精彩的互聯(lián)網(wǎng)并通過(guò)我實(shí)際使用得來(lái)的體驗(yàn) 給出 2 個(gè)解決方法 , 雖然說(shuō)我還看到有人給的解決方法是 overflow 加給父級(jí) , 我就覺(jué)得挺迷的 , 不曉得是怎么一回事

開(kāi)始

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

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

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

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

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

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

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

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

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

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

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

結(jié)束

emmm我以前挺抗拒使用判斷滾動(dòng)來(lái)寫(xiě)這個(gè) , 但是當(dāng)我真的寫(xiě)了之后 , 我直呼 真香 !

總結(jié)

以上是生活随笔為你收集整理的[ vant ] vue移动端下拉刷新组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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