首页uniapp生成骨架屏

uniapp生成骨架屏

时间: 2025-01-09 07:36:56 浏览: 47

### 如何在 UniApp 中创建骨架屏效果 #### 创建骨架屏组件为了提升用户体验，在数据加载过程中可以使用骨架屏来代替空白页面。通过自定义组件的方式可以在多个页面复用此功能。 ```html <template> <view class="skeleton">  <view class="item" v-for="(item, index) in skeletonList" :key="index"></view> </view> </template> <script> export default { data() { return { skeletonList: new Array(5).fill({}) // 控制显示几条模拟内容 }; } }; </script> <style scoped> .skeleton .item { width: 100%; height: 80rpx; background-color: #f7f7f7; margin-bottom: 20rpx; border-radius: 10rpx; } </style> ``` #### 使用骨架屏组件将上述创建好的 `Skeleton` 组件引入到目标页面，并设置条件渲染逻辑，即只有在网络请求未完成前才展示该组件；一旦获取到了实际的数据，则隐藏它并呈现真实的 UI 结构[^1]。 ```javascript import Skeleton from '@/components/Skeleton.vue'; export default { components: { Skeleton }, data() { return { isLoading: true, listData: [] }; }, onLoad() { setTimeout(() => { this.listData = [...]; // 模拟异步操作取得列表项 this.isLoading = false; }, 2000); } }; ``` ```html <template> <block v-if="isLoading"> <Skeleton /> </block> <block v-else>  </block> </template> ```

阅读全文