解决 vant使用 van-list、van-pull-refresh 组合使用会出现两个loading

最新推荐文章于 2025-05-07 18:17:20 发布

失訫人

最新推荐文章于 2025-05-07 18:17:20 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端框架 css html5 es6 html

本文链接：https://blog.csdn.net/qq_43571357/article/details/134447295

文章讲述了在vant库中使用van-list和van-pull-refresh时，如何避免出现两个loading效果的问题，通过判断是否下拉来控制列表的loading显示。作者提供了相应的代码片段和方法处理方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vant使用 van-list、van-pull-refresh 组合使用会出现两个loading 如何解决？

直接上代码！！！

<van-pull-refresh v-model="refreshLoding" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" @load="onLoad">
        <!--通过判断是否下拉来 判断是否显示列表的loading 必须增加元素 组件有判断 -->
        <template #loading v-if="refreshLoding"><div></div></template>
    </van-list>
</van-pull-refresh>
<script>
    export default {
        data() {
            return {
                refreshLoding:false,
                loading:false,
                tabList:[]
            }
        },
        methods:{
            // 下拉刷新
            onRefresh() {
                // 清空列表数据
                this.tabList = [];
                this.finished = false;
                this.loading = false;
                this.result();
            },
            // list 加载
            onLoad() {
                // 判断是否是下拉 下拉就不请求列表的接口
                if (!this.refreshLoding) {
                    this.loading = true
                    this.result();
                }
            },
            // 数据接口
            result() {

            }
        }
    }
</script>