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

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

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

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

項目場景

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

這是請求的page和pageSize

page: 0,
pageSize: 10,

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

問題描述

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

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

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

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

往下走：

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

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

html,
body {
overflow-x: hidden;
}

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

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

原因分析

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

解決方案

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

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

首先 van-list 是首次進就會觸發(fā)加載的，滾動條滑倒底部不會再觸發(fā) 一般是因為外部高度未固定導(dǎo)致拿不到滾動條位置

<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 切換的時候需要重置下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()
? ? }