<template>
<div>
<!-- 使用 van-skeleton 组件 -->
<van-skeleton title :row="3" />
<!-- 模拟加载数据的按钮 -->
<van-button @click="loadData">加载数据</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 是否显示骨架屏，初始时显示
const showSkeleton = ref(true);
// 模拟加载数据的方法
const loadData = () => {
// 在加载数据前隐藏骨架屏
showSkeleton.value = false;
// 这里可以添加加载数据的逻辑，比如发起网络请求等
// 模拟加载完成后再显示骨架屏
setTimeout(() => {
showSkeleton.value = true;
}, 1000);
};
return {
showSkeleton,
loadData,
};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-skeleton 组件，并通过设置 :row 属性来指定骨架屏的行数。通过点击按钮调用 loadData 方法，模拟加载数据的操作，同时控制 showSkeleton 变量来切换显示和隐藏骨架屏。
你可以根据实际需求定制骨架屏的样式和行为。确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。
转载请注明出处：http://www.zyzy.cn/article/detail/5756/Vant