vant (Vue组件库) 下拉加载会出现加载两次的情况

最新推荐文章于 2025-07-11 11:35:19 发布

原创最新推荐文章于 2025-07-11 11:35:19 发布 · 2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vant上拉加载节流

本文介绍如何使用List组件实现上拉加载更多功能，并通过节流方法优化频繁触发事件的问题，避免性能瓶颈。

List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。

<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
    <van-list :finished="finished" @load="onload" v-model="loading" :offset="200">   <!--进入页面时，load会触发一次-->
        <div class="list-item" v-for="(item,index) in goodList" :key="index"
            <div class="list-item-text">
                <div>{{item.NAME}}</div>
            </div>
        </div>
    </van-list>
</van-pull-refresh>

export default {
        data() {
            return {
                loading: false,   //是否在上拉加载
                isRefresh: false,  //是否在刷新
                finished: false,   //是否还有商品
                timer: null
            }
        },

在网页实际运行的某些场景下，有些事件时会被不间断的被触发的，如resize事件，而不像是我们想象中的，滚动一次触发一次。这种情况下，由于过于频繁地DOM操作和资源加载，严重影响了网页性能，甚至会造成浏览器崩溃。
如：滚动到页面底部加载更多，稍微滚动一下就会触发n多次scroll事件,此时就可以用到节流的方法：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

methods: {
                 if(!this.timer){
                    this.timer = setTimeout(() => {
                        this.getGoods()       //请求商品数据的方法
                        this.timer = null;
                    }, 1000)
                }

        }