uniapp+uview骨架屏
时间: 2025-04-06 08:00:45 浏览: 52
### 如何在 UniApp 中使用 UView 实现骨架屏效果
在开发过程中,为了提升用户体验并减少加载等待时间带来的不适感,可以采用骨架屏作为数据未完全加载前的占位展示方式。以下是关于如何通过 `uView` 组件库实现骨架屏的具体方法。
#### 骨架屏的概念
骨架屏是一种用于优化页面加载体验的设计方案,在真实内容尚未完成渲染之前,先显示一个简单的框架结构来代替实际的内容[^1]。
#### 使用 uView 的 Skeleton 功能组件
`uView` 是一款基于 Vue.js 和 UniApp 平台设计的强大 UI 库,其中包含了丰富的功能模块以及样式支持。对于创建骨架屏而言,可以直接利用其内置的 `<u-skeleton>` 组件来进行配置和应用。
##### 安装与引入 uView
如果还未安装 `uView` ,可以通过 npm 或者手动下载的方式将其集成到项目当中:
```bash
npm install @dcloudio/uview-ui --save
```
接着需要确保已经在项目的入口文件 main.js 中正确注册该插件:
```javascript
import uView from '@dcloudio/uview-ui';
Vue.use(uView);
```
##### 基础示例代码
下面提供了一个基础的例子演示如何运用 `<u-skeleton>` 来模拟一段文章列表项正在加载的状态:
```html
<template>
<view class="content">
<!-- 开启骨架屏 -->
<u-skeleton :loading="loading" rows="3"></u-skeleton>
<!-- 正常的数据展示区域 -->
<block v-if="!loading">
<view class="item" v-for="(item, index) in listData" :key="index">
{{ item.title }}
</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
loading: true,
listData: []
};
},
onLoad() {
setTimeout(() => {
this.listData = [
{ title: '新闻标题一' },
{ title: '新闻标题二' },
{ title: '新闻标题三' }
];
this.loading = false;
}, 2000); // 模拟网络请求延迟两秒结束
}
};
</script>
<style scoped lang="scss">
.content .item {
padding: 20rpx;
border-bottom: 1px solid #f5f5f5;
}
</style>
```
上述实例展示了当 `loading=true` 时会激活 skeleton 效果;而一旦设置成 `false` 后,则切换至正常模式下的具体内容呈现[^2]。
#### 自定义参数调整
除了基本用法外,还可以进一步自定义更多属性来自适应不同场景需求,比如改变动画形式、指定宽度高度比例等等。具体可查阅官方文档获取更详尽说明[^3]。
---
阅读全文
相关推荐
















