vant-List-@load事件一直觸發(fā)的解決

更新時(shí)間：2023年01月18日 10:11:10 作者：Delete_89x

這篇文章主要介紹了vant-List-@load事件一直觸發(fā)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vant-List-@load事件一直觸發(fā)

項(xiàng)目場(chǎng)景

今天項(xiàng)目用到vant-List，發(fā)現(xiàn)一直觸發(fā)@load事件。

這是請(qǐng)求的page和pageSize

page: 0,
pageSize: 10,

后端測(cè)試數(shù)據(jù)一共21條，但是進(jìn)入頁面就一下請(qǐng)求了三次，全部加載完數(shù)據(jù)了，這樣就達(dá)不到要求了。

問題描述

查看了文檔底下的常見問題：

為什么會(huì)連續(xù)觸發(fā) load 事件？

如果一次請(qǐng)求加載的數(shù)據(jù)條數(shù)較少，導(dǎo)致列表內(nèi)容無法鋪滿當(dāng)前屏幕，List 會(huì)繼續(xù)觸發(fā) load 事件，直到內(nèi)容鋪滿屏幕或數(shù)據(jù)全部加載完成。因此你需要調(diào)整每次獲取的數(shù)據(jù)條數(shù)，理想情況下每次請(qǐng)求獲取的數(shù)據(jù)條數(shù)應(yīng)能夠填滿一屏高度。

看到這個(gè)時(shí)候我查看了一下代碼，10條的數(shù)據(jù)量是能夠填滿一屏的，但是還是直接請(qǐng)求完成了。

往下走：

在 html、body 上設(shè)置 overflow 后一直觸發(fā)加載？

如果在 html 和 body 標(biāo)簽上設(shè)置了overflow-x: hidden樣式，會(huì)導(dǎo)致 List 一直觸發(fā)加載。

html,
body {
overflow-x: hidden;
}

這個(gè)問題的原因是當(dāng)元素設(shè)置了overflow-x: hidden樣式時(shí)，該元素的overflow-y會(huì)被瀏覽器設(shè)置為auto，而不是默認(rèn)值visible，導(dǎo)致 List 無法正確地判斷滾動(dòng)容器。

解決方法是去除該樣式，或者在 html 和 body 標(biāo)簽上添加height: 100%樣式。

原因分析

到這里就找到問題的原因了，我習(xí)慣在外層盒子加上min-height: 100vh;overflow-x:hidden;沒想到會(huì)影響這個(gè)組件，麻了。

解決方案

去除overflow-x: hidden;或?qū)in-height: 100vh;改為height: 100vh;

vant-list onLoad觸發(fā)以及tab切換不再觸發(fā)問題

首先 van-list 是首次進(jìn)就會(huì)觸發(fā)加載的，滾動(dòng)條滑倒底部不會(huì)再觸發(fā) 一般是因?yàn)橥獠扛叨任垂潭▽?dǎo)致拿不到滾動(dòng)條位置

<template>
? ? <div class="listClass" ref="listout">
? ? ? ? <van-list v-model="loading" :finished="finished" finished-text="沒有更多了" @load="onLoad">
? ? ? ? ? ? <div v-for="(item, index) in list" :key="index">{{item}}</div>
? ? ? ? </van-list>
? ? </div>
</template>
<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? // 初始化定義
? ? ? ? ? ? loading: true,
? ? ? ? ? ? finished: false,
? ? ? ? ? ? searchData: {
? ? ? ? ? ? ? ? pageSize: 10,
? ? ? ? ? ? ? ? pageNo: 0
? ? ? ? ? ? },
? ? ? ? ? ? list: []
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? onLoad(){
? ? ? ? ? ? this.searchData.pageNo += 1
? ? ? ? ? ? this.obtainList()
? ? ? ? },
? ? ? ? // 列表
? ? ? ? obtainList () {
? ? ? ? ? ? // 調(diào)用列表接口(此為演示)
? ? ? ? ? ? findList(this.searchData).then(res => {
? ? ? ? ? ? ? ? if (res.data.data && res.data.errcode == 0) {
? ? ? ? ? ? ? ? ? ? if(this.searchData.pageNo == 1){
? ? ? ? ? ? ? ? ? ? ? ? this.list = []
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? res.data.data.result.forEach((v) => {
? ? ? ? ? ? ? ? ? ? ? ? this.list.push(v)
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? this.loading = false
? ? ? ? ? ? ? ? ? ? if(this.searchData.pageNo >= res.data.data.totalPage) {
? ? ? ? ? ? ? ? ? ? ? ? this.finished = true
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? }
}
</script>
<style scoped>
.listClass {
? ? width: 100%;
? ? height: 100vh;
? ? overflow-y: auto;
}
</style>

tab 切換的時(shí)候需要重置下loading和finished狀態(tài)

? ? // 切換
? ? activeClick (type) {
? ? ? this.searchData.active = type
? ? ? this.searchData.pageNo = 0
? ? ? this.$refs.listout.scrollTop = 0
? ? ? this.loading = true
? ? ? this.finished = false
? ? ? this.onLoad()
? ? }