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>
相关文章
|
11月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
1695 139
|
存储 人工智能 移动开发
uni-app+vue3接入deepseek-v3搭建跨端ai流式(小程序+app+h5)
基于Uniapp+Vue3+Markdown接入DeepSeek-V3聊天大模型,支持编译到H5+小程序+App端。实现流式输出、支持亮色/暗黑主题、代码高亮、会话本地存储等功能。
2485 12
|
API 开发者 Windows
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
1519 85
uniapp 极速上手鸿蒙开发
|
JSON 小程序 应用服务中间件
微信的接口wxLogin()的返回值都有什么?
【10月更文挑战第4天】微信的接口wxLogin()的返回值都有什么?
1949 1
|
JSON NoSQL 安全
MongoDB的导入导出、备份恢复总结
这篇文章是关于MongoDB的导入导出、备份恢复操作的总结。
5010 4
|
人工智能 Rust PyTorch
Hibiki:实时语音翻译模型打破语言交流障碍!支持将语音实时翻译成其他语言的语音或文本
Hibiki 是由 Kyutai Labs 开发的实时语音翻译模型,能够将一种语言的语音实时翻译成另一种语言的语音或文本,支持高保真度和低延迟。
2047 18
Hibiki:实时语音翻译模型打破语言交流障碍!支持将语音实时翻译成其他语言的语音或文本
|
搜索推荐
uview下拉菜单Dropdown整合个性化下拉
uview下拉菜单Dropdown整合个性化下拉
895 5
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
989 4
|
移动开发 小程序 API
uniapp组件库中Collapse 折叠面板 的使用方法
uniapp组件库中Collapse 折叠面板 的使用方法
2488 1

热门文章

最新文章