057_Skeleton骨架屏

最新推荐文章于 2024-05-18 09:39:58 发布
最新推荐文章于 2024-05-18 09:39:58 发布
阅读量2.6k 收藏 3
点赞数 1
分类专栏： element-ui 文章标签： 前端 vue.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/123304207
版权

1. Skeleton骨架屏

1.1. 在需要等待加载内容的位置设置一个骨架屏, 某些场景下比Loading的视觉效果更好。

1.2. Skeleton Attributes

参数

说明

类型

可选值

默认值

animated

是否使用动画

boolean

true / false

false

count

渲染多少个template, 建议使用尽可能小的数字

number

integer

1

loading

是否显示skeleton骨架屏

boolean

true / false

true

rows

骨架屏段落数量

number

正整数

4

throttle

延迟占位DOM渲染的时间, 单位是毫秒

number

正整数

0

1.3. Skeleton Item Attributes

参数

说明

类型

可选值

默认值

variant

当前显示的占位元素的样式

Enum(string)

p / text / h1 / h3 / text / caption / button / image / circle / rect

 

text

1.4. Skeleton Slots

name

说明

default

用来展示真实UI

template

用来展示自定义占位符

2. Skeleton骨架屏例子

2.1. 使用脚手架新建一个名为element-ui-skeleton折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Skeleton from '../components/Skeleton.vue'
import SlotTemplateSkeleton from '../components/SlotTemplateSkeleton.vue'
import LoadingSkeleton from '../components/LoadingSkeleton.vue'
import CountSkeleton from '../components/CountSkeleton.vue'
import ThrottleSkeleton from '../components/ThrottleSkeleton.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Skeleton' },
  { path: '/Skeleton', component: Skeleton },
  { path: '/SlotTemplateSkeleton', component: SlotTemplateSkeleton },
  { path: '/LoadingSkeleton', component: LoadingSkeleton },
  { path: '/CountSkeleton', component: CountSkeleton },
  { path: '/ThrottleSkeleton', component: ThrottleSkeleton }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Skeleton.vue

<template>
  <div>
    <h1>基础用法</h1>
    <h4>基础的骨架效果。</h4>
    <el-skeleton />
    <h1>更多参数</h1>
    <h4>可以配置骨架屏段落数量, 以便更接近真实渲染效果。首行会被渲染一个长度33%的段首。</h4>
    <el-skeleton :rows="6" />
    <h1>动画效果</h1>
    <h4>显示动画效果。</h4>
    <el-skeleton :rows="6" animated />
  </div>
</template>

2.4. 在components下创建SlotTemplateSkeleton.vue

<template>
  <div>
    <h1>自定义样式</h1>
    <h4>Element提供的排版模式有时候并不满足要求, 当您想要用自己定义的模板时, 可以通过一个具名Slot来自己设定模板。</h4>
    <el-skeleton style="width: 240px;">
      <template slot="template">
        <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
        <div style="padding: 14px;">
          <el-skeleton-item variant="p" style="width: 50%" />
          <div style="display: flex; align-items: center; justify-items: space-between;">
            <el-skeleton-item variant="text" style="margin-right: 16px;" />
            <el-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

2.5. 在components下创建LoadingSkeleton.vue

<template>
  <div>
    <h1>Loading状态</h1>
    <h4>当Loading结束之后, 我们往往需要显示真实的UI, 可以通过loading的值来控制是否显示真实的DOM。然后通过具名Slot来设置当loading结束之后需要展示的UI。</h4>
    <div style="width: 240px">
      <p>
        <label style="margin-right: 16px;">切换 Loading</label>
        <el-switch v-model="loading" />
      </p>
      <el-skeleton style="width: 240px" :loading="loading" animated>
        <template slot="template">
          <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
          <div style="padding: 14px;">
            <el-skeleton-item variant="h3" style="width: 50%;" />
            <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
              <el-skeleton-item variant="text" style="margin-right: 16px;" />
              <el-skeleton-item variant="text" style="width: 30%;" />
            </div>
          </div>
        </template>
        <template>
          <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" />
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom card-header">
                <span class="time">{{ currentDate }}</span>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      currentDate: '2021-06-01'
    }
  }
}
</script>

2.6. 在components下创建CountSkeleton.vue

<template>
  <div>
    <h1>渲染多条数据</h1>
    <h4>大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的UI。利用count这个属性就能控制渲染多少条假的数据在页面上。</h4>
    <div style="width: 300px;">
      <p><el-button @click="setLoading">点我重新加载</el-button></p>
      <el-skeleton style="width: 300px;" :loading="loading" animated :count="3">
        <template slot="template">
          <el-skeleton-item variant="image" />
          <div style="padding: 14px;">
            <el-skeleton-item variant="h3" style="width: 50%;" />
            <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
              <el-skeleton-item variant="text" style="margin-right: 16px;" />
              <el-skeleton-item variant="text" style="width: 30%;" />
            </div>
          </div>
        </template>
        <template>
          <el-card :body-style="{ padding: '0px', marginBottom: '1px' }" v-for="item in lists" :key="item.name">
            <img :src="item.imgUrl" class="image multi-content" style="width: 300px; height: 160px;" />
            <div style="padding: 14px;">
              <span>{{ item.name }}</span>
              <div class="bottom card-header">
                <span class="time">{{ currentDate }}</span>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      currentDate: '2021-06-01',
      lists: []
    }
  },
  mounted () {
    this.loading = false
    this.lists = [
      {
        imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        name: '鹿'
      },
      {
        imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        name: '马'
      },
      {
        imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        name: '山狮'
      }
    ]
  },
  methods: {
    setLoading () {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)
    }
  }
}
</script>

2.7. 在components下创建ThrottleSkeleton.vue

<template>
  <div>
    <h1>防止渲染抖动</h1>
    <h4>有的时候, API的请求回来的特别快, 往往骨架占位刚刚被渲染, 真实的数据就已经回来了, 用户的界面会突然一闪, 此时为了避免这种情况, 就需要通过throttle属性来避免这个问题。</h4>
    <div style="width: 240px">
      <p>
        <label style="margin-right: 16px;">切换 Loading</label>
        <el-switch v-model="loading" />
      </p>
      <el-skeleton style="width: 240px" :loading="loading" animated :throttle="500">
        <template slot="template">
          <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
          <div style="padding: 14px;">
            <el-skeleton-item variant="h3" style="width: 50%;" />
            <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;">
              <el-skeleton-item variant="text" style="margin-right: 16px;" />
              <el-skeleton-item variant="text" style="width: 30%;" />
            </div>
          </div>
        </template>
        <template>
          <el-card :body-style="{ padding: '0px', marginBottom: '1px'}">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image" />
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom card-header">
                <span class="time">{{ currentDate }}</span>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: false,
      currentDate: '2021-06-01'
    }
  }
}
</script>

2.8. 运行项目, 访问http://localhost:8080/#/Skeleton

 2.9. 运行项目, 访问http://localhost:8080/#/SlotTemplateSkeleton

 2.10. 运行项目, 访问http://localhost:8080/#/LoadingSkeleton

2.11. 运行项目, 访问http://localhost:8080/#/CountSkeleton

 2.12. 运行项目, 访问http://localhost:8080/#/ThrottleSkeleton

自由与束缚JavaJavaScript
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
skeleton:应用框架
05-10
ZendSkeleton应用 介绍 这是一个使用ZF2 MVC层和模块系统的简单骨架应用程序。 该应用程序将被用作那些希望用ZF2弄湿脚的人的起点。 使用Composer安装 创建新ZF2项目的最简单方法是使用 。 如果尚未安装，请按照安装。 创建您的新ZF2项目： composer create-project -n -sdev zendframework/skeleton-application path/to/install 使用tarball与本地Composer进行安装 如果尚未在全球范围内安装作曲家，那么创建新的ZF2项目的另一种方法是下载并安装tarball： 下载，解压缩它，然后使用本地安装的Composer安装依赖项： cd my/project/dir curl -#L https://github.com/zendframework/ZendSkeleton
element-骨架屏
qq_44866853的博客
10-27 3823
骨架屏的设置
推荐一款优雅的骨架屏动画库——SkeletonUI
最新发布
gitblog_00094的博客
05-18 371
推荐一款优雅的骨架屏动画库——SkeletonUI 项目地址:https://gitcode.com/CSolanaM/SkeletonUI 在我们日常的App开发中，加载数据时，通常会使用空白页或者传统的loading图标来提示用户，但这些方式往往无法提供足够的上下文信息，让用户了解正在加载的内容是什么。今天，我要向大家推荐一个开源项目——SkeletonUI，它是一款为iOS、tvOS、wat...
骨架屏 Skeleton
fu64343434的博客
06-07 1401
数据回来之前是显示骨架结构等数据回来之后替换成真实数据 在包裹骨架结构的template上写上#template意思为会渲染名字为template的标签包含的内容，而真实数据结构就是标签名为template的结构，骨架屏是在请求数据库数据未回来之前 显示的html结构，称之为骨架，这样做是为了更好的用户体验。，初始值状态是在data里定义的，初始为true，等数据请求回来改为false。骨架屏就会被自动替换成真实数据渲染的DOM结构 所以当你。标签包裹起来的就是用骨架屏的地方，的时候不妨加一句话，
element-ui组件Skeleton 骨架屏不显示问题解决
lingliu0824的博客
05-26 3718
问题：项目中使用的是全局注册的方式注册element组件，通过import导入后通过Vue.use注册但是使用的时候该组件并没有显示 解决：需要同时再引入ElSkeletonItem ---------------------------分割线---------------------------------------- 由于篇幅不能太短，所以再讲下解决过程，可以直接跳过 查看元素如下： 发现内部的标签是el-skeleton-item,感觉是没有解析出来。 在导入Skeleton的地方ctrl+左
element ui修改骨架屏形状
weixin_45966674的博客
09-10 1520
这里 我们只放了一个骨架屏 然后设置 他的宽度 100 VW 就是整个屏幕 高度 定义为120px。每一个的宽度 都是 30VW 屏幕宽度的百分之三十 高度是100VH 屏幕的百分之百高度。都带有 1VW 的左右边距 左右边距都是屏幕的百分之1。这个形状虽然也可以 但有些情况和东西的加载显然不太适合这个形态。这样我们就可以根据自己的需要去改变骨架屏的形状啦。这是element ui的原本形状。如果你是vue2 则。这里我们设置了三个骨架。
flutter_skeleton:颤振骨架屏幕
05-07
颤振骨架 |颤振骨架屏幕。用法1.依赖将此添加到您程序包的pubspec.yaml文件中： dependencies : flutter_skeleton : ^0.1.0+12.安装运行命令： $ flutter packages get3.进口导入Dart代码： import 'package:flutter...
flutter_skeleton:每个版本的Flutter骨架
03-08
flutter_skeleton 一个新的Flutter项目。入门该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门：要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，...
vue-skeleton:基于Vue的骨架屏实现
03-25
基于Vue的骨架屏实现 使用方法 import Skeleton from './index.js' Vue . component ( Skeleton . name , Skeleton ) < div> < p> < span> </ span> . gm-skeleton { background-image : linear-...
rasoulmiri_Skeleton
05-21
在Android开发中，"rasoulmiri_Skeleton"是一个实现骨架屏效果的项目。骨架屏是一种在数据加载过程中展示的占位符，它能够给用户一种界面正在动态加载的感觉，提高用户体验。骨架屏的设计通常与实际内容的结构相似，...
Vue页面骨架屏注入方法
08-27
我们可以在 /src 目录下新建一个 Skeleton.vue 文件，其内容可以是一个带有骨架屏样式的模板。然后，我们可以使用工具在构建时自动注入到 div#app 里面。 在 Skeleton.vue 文件中，我们可以使用 Vue 的模板语法来...
skeleton:用于构建和部署WordPress网站的框架
05-24
网站骨架 工作正在进行中！ 但是这里已经是您的灵感了。 用于构建和部署WordPress网站的框架 开始 将您的WP核心放在/wp/ 运行“ npm install gulp”以在您的项目中安装gulp。 运行“ npm install”以安装依赖项 您的资产位于/content/themes/v1/assets/ <-中，它们将被gulp编译为“ compiled-assets”。 设置数据库并将数据库信息放在/content/database.yml 运行cap staging wp：setup：local以在本地设置wp-config 。 运行“ gulp”并享受！ 假设条件 /content/自定义内容目录（更干净，也因为它不能位于/wp/ ） 根目录中的wp-config.php （因为它不能在/wp/ ） Capistrano命令 通过npm install安装ca
landing_skeleton：这是使用Skeleton CSS的练习登录页面
02-20
landing_skeleton 这是使用Skeleton CSS的练习登录页面。
vue骨架屏
YuT_ian的博客
11-02 322
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。 一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta h
骨骼实验室 Skeleton: 极简主义的前端开发框架
gitblog_00065的博客
03-21 285
骨骼实验室 Skeleton: 极简主义的前端开发框架 项目地址:https://gitcode.com/skeletonlabs/skeleton Skeleton 是一个轻量级、易于上手的前端开发框架，由 Skeleton Labs 团队精心打造。它以极简主义的设计理念，为开发者提供了一个快速构建响应式网站的基础结构，旨在提高开发效率并保证页面在各种设备上的良好呈现。 技术分析 简洁的 C...
骨架屏的使用
weixin_46084100的博客
07-15 1329
骨架屏的实现
Material UI 4.10 Skeleton 骨架
ejinxian的专栏
05-24 329
Material-UI官方学习资料 它是React组件，实现了谷歌Material Design设计规范。世界上最流行的React界面框架。 Material UI 4.10.0 发布了。Material UI 是一组实现 Google Material Design 规范的 React 组件，它是一个前端 JS 框架，主要用在 Web 领域 Material Skeleton 骨架屏 查看文档以了解更多。 添加标签辅助功能文档部分。可以使用selectionFollowsFocus...
推荐一款高效开发框架：TypeScript + Node.js 应用Skeleton
gitblog_00048的博客
05-08 380
推荐一款高效开发框架：TypeScript + Node.js 应用Skeleton 项目地址:https://gitcode.com/RisingStack/node-typescript-starter 在这个快速发展的软件开发世界中，寻找一个稳定、强大且易于上手的项目框架至关重要。今天，我要向大家推荐的是一个基于Node.js和TypeScript编写的高质量应用骨架——Skeleton。这...
vue加载组件骨架屏el-skeleton使用
qq_43275743的博客
10-27 1995
vue elementui el-skeleton
vant Skeleton 骨架屏
07-27
Vant 是一套基于 Vue.js 的移动端组件库，而 Skeleton 骨架屏是一种常用的页面加载过渡效果，用于提升用户体验。Vant 提供了 Skeleton 组件，可以方便地实现骨架屏效果。 在 Vant 中使用 Skeleton 骨架屏，可以通过以下步骤实现： 1. 安装 Vant：使用 npm 或 yarn 安装 Vant 组件库。 2. 导入 Skeleton 组件：在需要使用骨架屏效果的页面中，导入 Skeleton 组件。 3. 在模板中使用 Skeleton：在页面的相应位置使用 Skeleton 组件，并设置相应的属性，如占位段落数量、占位段落宽度、占位段落高度等。 4. 样式定制：根据需求，可以通过 CSS 样式对骨架屏进行定制，如修改颜色、宽度、高度等。 通过以上步骤，就可以在 Vant 中使用 Skeleton 骨架屏来提升页面加载时的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值