uView Skeleton 骨架屏

简介: uView Skeleton 骨架屏

骨架屏一般用于页面在请求远程数据尚未完成时,页面用灰色块预显示本来的页面结构,给用户更好的体验。

说明

由于VUENVUE的特性不同,组件动画在VUE上为由左到右形式,在NVUE上为明暗显隐的形式。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

组件由标题段落头像组件组件,其中段落需要通过rows参数配置才显示,可以通过titleavatar是否显示标题头像

该组件的使用,有几个需要注意的点,如下:

  • title(可选),是否显示标题占位行,该占位行不布满全屏宽度,同时与段落的距离较大以做明显区分
  • avatar(可选),是否在左上角位置显示圆形的头像占位区域
  • rows(可选),段落的行数
  • loading(必选),是否加载中状态,如果为`true```则显示骨架屏组件占位,否则显示插槽中的内容

数据请求完成后,将loading设置为false,会隐藏骨架组件

<template>
  <u-skeleton
      rows="3"
      title
    loading
  ></u-skeleton>
</template>

copy

#加载中动画

设置animatetrue,加载中的骨架块将会有一个动画效果,用以加强视觉效果。

<u-skeleton :loading="true" :animate="true"></u-skeleton>

copy

#显示头像

<u-skeleton :loading="true" avatar rows="1"></u-skeleton>

copy

#插槽内容

可以通过插槽写入展示的内容,当请求结束,将loading设置为false,此时会隐藏骨架组件,同时展示插槽内容。

<template>
  <u-skeleton
      rows="2"
    :loading="loading"
    avatar
    :title="false"
  >
    <u--text>loading为false时,将会展示此处插槽内容</u--text>
  </u-skeleton>
</template>
<script>
  export default {
    data() {
      return {
        loading: true
      }
    },
    onLoad() {
      // 延时2秒钟
      uni.$u.sleep(2000).then(() => {
        this.loading = false
      })
    }
  }
</script>
相关文章
|
缓存 资源调度 JavaScript
瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用
瓦片地图的介绍和Vue中使用Openlayer加载瓦片地图的方法使用
1586 0
|
4月前
|
JavaScript
Vue3骨架屏(Skeleton)
该文章介绍了一个名为Skeleton的Vue组件,用于创建加载时的占位符界面,包含多种可配置项如按钮、输入框、图像等,并支持动画效果。
Vue3骨架屏(Skeleton)
|
4月前
|
JavaScript
Vue3 异步组件实现骨架屏效果
这是一个简单的自定义axios封装示例。`axios.ts`文件中定义了一个基本的GET请求方法,通过XMLHttpRequest发起网络请求,并返回解析后的响应体。在其他`.vue`组件中,通过导入此封装,利用定义好的数据接口类型`Data`,采用异步组件+顶层await的方式从本地`data.json`文件中获取数据。最后,在`app.vue`中通过Suspense和异步组件的方式展示数据加载过程。
61 3
|
5月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
443 3
|
5月前
|
JavaScript 前端开发 开发者
uniapp实战 —— 骨架屏
uniapp实战 —— 骨架屏
147 0
|
7月前
Vuetify 明暗主题切换
Vuetify 明暗主题切换
98 0
|
7月前
|
JavaScript 前端开发
使用styled-components控制主题切换(有手就行)
使用styled-components控制主题切换(有手就行)
138 0
|
JavaScript 前端开发 定位技术
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
|
JavaScript
WebGis——Pixi开发vue项目之实现闪烁点功能(二)
WebGis——Pixi开发vue项目之实现闪烁点功能(二)
|
前端开发 API UED
「前端UI组件」如何实现一个骨架屏组件
用技术实现梦想,用梦想打开前端技术之门。今天分享如何实现一个骨架屏组件。
773 1
「前端UI组件」如何实现一个骨架屏组件