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 前端开发 开发者
uniapp实战 —— 骨架屏
uniapp实战 —— 骨架屏
341 0
|
移动开发 API 开发工具
uniapp如何与原生应用进行混合开发?
uniapp如何与原生应用进行混合开发?
888 0
|
JavaScript
成功解决:Failed to resolve directive: mode
这篇文章介绍了如何解决Vue中遇到的"Failed to resolve directive: mode"错误的两个常见原因及其解决办法:确保指令的单词拼写正确,以及在创建Vue实例之前注册全局指令。
成功解决:Failed to resolve directive: mode
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
|
JavaScript
Vue3骨架屏(Skeleton)
该文章介绍了一个名为Skeleton的Vue组件,用于创建加载时的占位符界面,包含多种可配置项如按钮、输入框、图像等,并支持动画效果。
286 0
Vue3骨架屏(Skeleton)
|
小程序 API
微信小程序getLocation报错 getLocation:fail the api need to be declared in the requiredPrivateInfos field in
微信小程序getLocation报错 getLocation:fail the api need to be declared in the requiredPrivateInfos field in
837 1
线性代数——(期末突击)行列式(上)-行列式计算、行列式的性质
线性代数——(期末突击)行列式(上)-行列式计算、行列式的性质
515 7
|
JavaScript
uView(u-collapse)折叠 展开 高度问题 无法撑开 nextTick
这段内容是关于一个使用 Vue 的代码示例,涉及`u-collapse`组件的使用问题。代码展示了如何通过`v-for`循环渲染`levelList`和`filmList`数据。当`u-collapse`以手风琴模式运行时,`filmList`的数据加载后未能正确展开。问题在于尽管尝试了官方文档的方法和网络上的其他解决方案,但`filmList`依然无法正常显示。
611 4
|
关系型数据库 MySQL 数据库
【MySQL】:超详细MySQL完整安装和配置教程
【MySQL】:超详细MySQL完整安装和配置教程
41168 5
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
538 0