1. 全栈程序员必看首页

Skeleton Screen — 骨架屏–应用

全栈程序员-站长 • • 未分类 • 阅读 83

Skeleton Screen — 骨架屏–应用Skeleton Screen — 骨架屏–应用

大家好，又见面了，我是你们的朋友全栈君。

案例：使用

现已经在支付的项目使用

 

用户体验一直是前端开发需要考虑的重要部分，在数据请求时常见到锁屏的loading动画，而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代，以优化用户体验

 

Skeleton Screen -- 骨架屏--应用 

Skeleton Screen

Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页。

请求处理

无论是PC端还是移动端，只要有数据请求都会出现一定的延迟时间，之前对于这段等待时间的处理也是各不相同。同步请求中页面会卡住，直到请求完成，用户期间无法进行任何操作，有一种死机的感觉，体验较差。异步请求中大多数会以锁屏的loading动画过渡等待时间，于是，也就出现了制作不同loaidng状态的炫技。 loading

Skeleton Screen优势

锁屏loading在一定程度限制了用户的操作，所以为了进一步提升用户体验，Skeleton Screen被越来越多的公司产品采用，如：Facebook、简书、知乎、掘金等，在动态、文章加载时预先渲染出结构布局，数据加载完成后再填充数据显示，这样的好处在于不干扰用户操作，使用户对于加载的内容有一个大致的预期，特别是弱网络环境下极大的优化了用户体验。

二、项目中的使用

项目的引入：

Skeleton Screen -- 骨架屏--应用
注册全局
Skeleton Screen -- 骨架屏--应用
组件的目录
Skeleton Screen -- 骨架屏--应用

引入说明

Options：

SkeletonLoading

Props

Props
Type
Default
Description
– – – –

Function

Name
Type
Descrition
– – –

Events

Name
Type
Description
– – –

Slot

Name
Description
default slot –

CircleSkeleton

Props

Props
Type
Default
Description
backColor String #e7e7e7 background color
diameter String 100% diameter of circle

Function

Name
Type
Descrition
– – –

Events

Name
Type
Description
– – –

Slot

Name
Description
– –

SquareSkeleton

Props

Props
Type
Default
Description
backColor String #e7e7e7 background color
boxProperties Object   box properties of square skeleton
count Number 1 count of square skeleton

boxProperties

Item
Type
Default
Description
width String 100% 宽度 默认为容器的宽度支持px、em、rem单位
height String 16px 高度 支持px、em、rem单位
top String 0 外上边距 支持px、em、rem单位
bottom String 0 外下边距 支持px、em、rem单位

Function

Name
Type
Descrition
– – –

Events

Name
Type
Description
– – –

Slot

Name
Description
– –

Column

Props

Props
Type
Default
Description
gutter Number 0 左右的外边距 相当于 pading: 0 gutter, 单位px。
span Number – 一行被等分为24份，span值为一行中占据的份数，参考这里 。
order Number – 一行中位置优先级，参考这里 。

Function

Name
Type
Descrition
– – –

Events

Name
Type
Description
– – –

Slot

Name
Description
– –

Row

Props

Props
Type
Default
Description
gutter Object – 上下的外边距 相当于 pading: gutter.top 0 gutter.bottom 0, 单位px。
align String – 值可以为 top, middle, bottom, 具体可以参考 flex。
justify Number – 值可以为 start, end, center, space-around, space-between, 具体可以参考 flex 。

gutter

Props
Type
Default
Description
top String 0 上外边距 相当于 pading-top: top, 需要带上单位， 单位可以是px em rem。
bottom String 0 下外边距 相当于 pading-bottom: top, 需要带上单位， 单位可以是px em rem。

Function

Name
Type
Descrition
– – –

Events

Name
Type
Description
– – –

Slot

Name
Description
– –

例子一：

<template>
<div class=”list1″>
<skeleton-loading>
<row v-for=”i in 6″ :key=”i” :gutter=”{top: ’10px’, bottom: ’10px’}”>
<column :span=”3″ :gutter=”10″>
<circle-skeleton></circle-skeleton>
</column>
<column :span=”20″ :gutter=”10″>
<square-skeleton
:count=”2″
:boxProperties=”{
bottom: ’15px’,
width: ‘250px’,
height: ’15px’
}”
></square-skeleton>
</column>
</row>
</skeleton-loading>
</div>
</template>

<script>
export default {}
</script> 

 

效果

skeleton-loading-demo1

git 仓库

http://git.daojia-inc.com/fe-jz/universal-pay/

分之：feature_share_skeleton

 

 

转载于:https://www.cnblogs.com/yayaxuping/p/10037386.html

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/107177.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • LAMP和LNMP，你更愿意选择谁，为什么？

    LAMP和LNMP，你更愿意选择谁，为什么？

    LAMP和LNMP，你更愿意选择谁，为什么？

    全栈程序员-站长的头像 全栈程序员-站长
    2021年9月24日
    42
  • 栈 数据结构_单调栈和单调队列

    栈 数据结构_单调栈和单调队列

    栈 数据结构_单调栈和单调队列单调栈笔者在做leetcode的题(下一个出现的最大数字)时，接触到了单调栈这一种数据结构，经过研究之后，发现单调栈在解决某些问题时出奇的好用，下面是对单调栈的性质和一些典型题目。什么是单调栈？从名字上就听的出来，单调栈中存放的数据应该是有序的，所以单调栈也分为单调递增栈和单调递减栈单调递增栈：数据出栈的序列为单调递增序列单调递减栈：数据出栈的序列为单调递减序列ps：这里一定要注意…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月19日
    30
  • UltraISO软碟通安装与刻盘以及安装镜像[通俗易懂]

    UltraISO软碟通安装与刻盘以及安装镜像[通俗易懂]

    UltraISO软碟通安装与刻盘以及安装镜像[通俗易懂]教程整合三个出处1.准备一个8G以上的U盘，USB2.0以上就可以。然后安装UltraISO，右击程序，以管理员身份运行：2.软件下载地址http://ct.ghpym.com/dir/7369060-41274910-101449本次提供的版本无需注册码，如果提示输入，可以使用下面的注册码输入任意激活码即可用户名：果核剥壳注册码：2042ED05F7B36E0D用户名：ghpym激活码：447D3A36B62292E33.点击文件-打开，找到下载的恢复镜像…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月26日
    11
  • pytest fixtures_jig和fixture的区别

    pytest fixtures_jig和fixture的区别

    pytest fixtures_jig和fixture的区别fixture的优势Pytest的fixture相对于传统的xUnit的setup/teardown函数做了显著的改进:命名方式灵活，不局限于setup和teardown这几个命名conf

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月31日
    10
  • Verilog 流水线设计[通俗易懂]

    Verilog 流水线设计[通俗易懂]

    Verilog 流水线设计[通俗易懂]一、什么是流水线流水线设计就是将组合逻辑系统地分割，并在各个部分（分级）之间插入寄存器，并暂存中间数据的方法。目的是将一个大操作分解成若干的小操作，每一步小操作的时间较小，所以能提高频率，各小操作能并行执行，所以能提高数据吞吐率（提高处理速度）。二、什么时候用流水线设计使用流水线一般是时序比较紧张，对电路工作频率较高的时候。典型情况如下：1）功能模块之间的流水线，用乒乓buffer来交互数据。代价是增加了memory的数量，但是和获得的巨大性能提升相比，可以忽略不计。2）I/O瓶

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月14日
    4
  • 第十四章《redis》

    第十四章《redis》

    第十四章《redis》

    全栈程序员-站长的头像 全栈程序员-站长
    2021年5月29日
    88

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号