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>
相关文章
|
7月前
|
JavaScript API
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
|
4月前
|
资源调度 JavaScript 前端开发
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
这篇文章介绍了在Vue 2项目中如何通过`v-viewer`插件实现图片的预览、切换、缩放、旋转等功能,并提供了插件的安装、配置和使用方法。
1402 0
Vue2项目使用v-viewer插件实现图片预览、切换、缩放、旋转...
|
4月前
|
JavaScript
Vue3骨架屏(Skeleton)
该文章介绍了一个名为Skeleton的Vue组件,用于创建加载时的占位符界面,包含多种可配置项如按钮、输入框、图像等,并支持动画效果。
Vue3骨架屏(Skeleton)
|
4月前
|
JavaScript
Vue3 异步组件实现骨架屏效果
这是一个简单的自定义axios封装示例。`axios.ts`文件中定义了一个基本的GET请求方法,通过XMLHttpRequest发起网络请求,并返回解析后的响应体。在其他`.vue`组件中,通过导入此封装,利用定义好的数据接口类型`Data`,采用异步组件+顶层await的方式从本地`data.json`文件中获取数据。最后,在`app.vue`中通过Suspense和异步组件的方式展示数据加载过程。
62 3
|
5月前
|
JavaScript 前端开发 开发者
uniapp实战 —— 骨架屏
uniapp实战 —— 骨架屏
164 0
|
7月前
|
资源调度 JavaScript UED
vue骨架布局使用
vue骨架布局使用
62 0
|
JavaScript 前端开发 定位技术
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵(一)
|
存储 JavaScript API
Vuejs设计与实现 —— 渲染器
Vuejs设计与实现 —— 渲染器
169 0
|
前端开发 API UED
「前端UI组件」如何实现一个骨架屏组件
用技术实现梦想,用梦想打开前端技术之门。今天分享如何实现一个骨架屏组件。
780 1
「前端UI组件」如何实现一个骨架屏组件

热门文章

最新文章