vant list 懒加载 第一次进行load事件时，莫名的进行了两次load事件

当时我的代码是这样的：

<template>
    <div class="now">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="true" offset="8">
            <!-- 组件内默认样式是将图片文字放在右边 -->
            <van-cell v-for="item in store.nowlist" :key="item.filmId" @click="handleRouter(item.filmId) ">
                <img :src="item.poster" alt="item.name" style="width: 150px; float:left;">
                <span>
                    {{ item.name }}
                </span>

                <!-- 法三： 既然是van-cell组件的默认样式不喜欢，就不用van-cell组件，直接用div 包裹img span标签自定义样式 -->
            </van-cell>
        </van-list>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useNowStore from '../../store/nowStore'
import { List as vanList, Cell as vanCell } from 'vant' //vant 组件

const store = useNowStore()
const router = useRouter()
const loading = ref(false)    //加载状态
const finished = ref(false)    //服务端数据是否接收完 ，如果接收完 值为true
const pageNum = ref(1)   //后端数据第几页的数据
const total = ref(0)   //接收到数据的长度，判断服务端数据是否接收完，如果接收完将设置finished值为true

const handleRouter = (id) => {
    router.push(`/detail/${id}`)
}

// 滚动到底部触发更新
const onLoad = async() => {
    // 表示数据全部取出，停止load事件
    if(total.value >=54){
        finished.value = true
        console.log('数据全部加载完')
        return 
    }
    total.value = await store.getNowList(pageNum.value)   //获取数据 并返回数据长度
    pageNum.value++
    console.log( total.value)
    loading.value = false     //每次执行onLoad方法时，loading值会自动变为true，表示不再触发load事件
    console.log('加载数据')
}
</script>


<style scoped>
* {
    padding: 0;
    margin: 0;
}

.now li {
    margin: 20px;
    list-style: none;
}

.now ul :last-child {
    margin-bottom: 50px;
}

/*vue3中但页面样式写法deep  在页面中将生成[data-v-586ab144] .van-cell__value 
表示父节点[data-v-586ab144]中的子节点.van-cell__value的样式，这样就覆盖了原本样式*/
:deep(.van-cell__value) {
    text-align: left;
}

/*
:deep(.van-cell) {
    min-width: 50px;
    min-height: 80px;
}
*/
</style>

 load事件起初进行了两次，为什么呢？

直到看到这篇文章，原来是样式的问题。

原因是：图片是由异步加载过程，当图片没到onload事件时候，它没渲染出来，宽高只有0，0。vant 的触底事件判断又在此之前。就会瞬间判断没填满当前空间，就会立刻又加载一次。

后来我给盒子设置了最小高度就成功了！

/*vue3中但页面样式写法deep  在页面中将生成[data-v-586ab144] .van-cell__value 
表示父节点[data-v-586ab144]中的子节点.van-cell__value的样式，这样就覆盖了原本样式*/
:deep(.van-cell__value) {
    text-align: left;
}
:deep(.van-cell) {
    min-width: 50px;
    min-height: 80px;
}