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>
相关文章
|
6月前
|
JavaScript API
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
Vue使用vue-3d-model组件预览3D三维文件、立体文件,支持旋转、自动播放
|
1月前
|
JavaScript
JS实现的罗盘装饰
JS实现的罗盘装饰
|
3月前
|
JavaScript
Vue3骨架屏(Skeleton)
该文章介绍了一个名为Skeleton的Vue组件,用于创建加载时的占位符界面,包含多种可配置项如按钮、输入框、图像等,并支持动画效果。
Vue3骨架屏(Skeleton)
|
3月前
|
JavaScript
Vue3 异步组件实现骨架屏效果
这是一个简单的自定义axios封装示例。`axios.ts`文件中定义了一个基本的GET请求方法,通过XMLHttpRequest发起网络请求,并返回解析后的响应体。在其他`.vue`组件中,通过导入此封装,利用定义好的数据接口类型`Data`,采用异步组件+顶层await的方式从本地`data.json`文件中获取数据。最后,在`app.vue`中通过Suspense和异步组件的方式展示数据加载过程。
60 3
|
4月前
|
JavaScript 前端开发 开发者
uniapp实战 —— 骨架屏
uniapp实战 —— 骨架屏
137 0
|
6月前
|
资源调度 JavaScript UED
vue骨架布局使用
vue骨架布局使用
53 0
|
JavaScript
WebGis——Pixi开发vue项目之实现闪烁点功能(二)
WebGis——Pixi开发vue项目之实现闪烁点功能(二)
|
JavaScript
【组件封装】vue打字机效果和文字发光
【组件封装】vue打字机效果和文字发光
【组件封装】vue打字机效果和文字发光
|
前端开发 API UED
「前端UI组件」如何实现一个骨架屏组件
用技术实现梦想,用梦想打开前端技术之门。今天分享如何实现一个骨架屏组件。
762 1
「前端UI组件」如何实现一个骨架屏组件
|
前端开发 JavaScript
详解在 vaw-layouts 中通过 sass 实现动态换肤功能 (一)
以往的前端开发中,css 一直不能称之为一种编程语言,虽然在 css3中增加了几个变量和函数,但是实现的功能还是比较有限。后来出现了几个css预处理器,比较常用的有:sass、less 、stylus。有了他们,我们可以对css进行一些简单的编程。如果您对他们还不了解,可以查看一下他们的官网学习一下,vaw-layouts项目中使用的的预处理器是sass,因此本文也是基于sass进行讲解实现动态换肤的功能。
详解在 vaw-layouts 中通过 sass 实现动态换肤功能 (一)