vue：vant2，通过列表slot插槽去自定义加载完成后的提示样式

最新推荐文章于 2023-03-11 17:42:38 发布

原创最新推荐文章于 2023-03-11 17:42:38 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

vant

1 篇文章

订阅专栏

这篇博客介绍了如何使用Van组件库在移动端实现下拉刷新和上拉加载更多的功能。通过`van-pull-refresh`和`van-list`组件，结合`v-model`和事件监听，可以轻松创建具有动态加载效果的列表。示例代码中展示了如何结合`v-for`遍历数据，并提供了无数据时的占位显示。

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

在这里插入图片描述
用法如下：

	<van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="list">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item" :title="item" />
        <template slot="finished">
          <div class="noData">
            <img style="width: 88px; height: 88px;" src="../../noData.png" alt="">
            <div class="noData_txt">暂无数据略略略</div>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>