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


相关推荐

  • html设置背景图片透明度代码,css设置图片背景透明度[通俗易懂]

    html设置背景图片透明度代码,css设置图片背景透明度[通俗易懂]

    html设置背景图片透明度代码,css设置图片背景透明度[通俗易懂]我们经常会使用到背景图片，但有时候需要把背景图片设置一个半透明的效果，那么就需要以下的CSS了。这是一个CSS滤镜达到的效果，应用十分广泛。.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto!important;width:100%}注：代码应用的式CSS中的Alpha滤镜，这个滤镜可以设置目标元素的透明度。还可以通过指定坐标，从…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月12日
    53
  • centos7 网络配置

    centos7 网络配置

    centos7 网络配置centos7刚安装，需要做一些配置才能正常上网！1.虚拟网络编辑器配置1）通过VMware菜单栏，依次点击编辑和虚拟网络编辑器2）选中VMnet8，取消勾选使用本地DHCP服务将IP地址分配给虚拟机，查看DHCP确保未启用，点击NAT设置3）查看网关IP，并记住192.168.255.2，用于网络配置文件设置2.修改mac地址如果本虚拟机为克隆机，则需要重新…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月28日
    47
  • setTimeout()和setInterval()在用法上有什么区别_setinterval返回值

    setTimeout()和setInterval()在用法上有什么区别_setinterval返回值

    setTimeout()和setInterval()在用法上有什么区别_setinterval返回值setTimeout与setTimeinterval的使用

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月5日
    2
  • RestTemplate设置MediaType[通俗易懂]

    RestTemplate设置MediaType[通俗易懂]

    RestTemplate设置MediaType[通俗易懂]Stringurl=”http://testurl”;Map<String,Object>requestMap=newHashMap<>();resultMap.put(“param1″,”value1”);resultMap.put(“param2″,”value2”);HttpHeadersheaders=newHttpH…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月9日
    33
  • DM368开发 — 毕设之硬件[通俗易懂]

    DM368开发 — 毕设之硬件[通俗易懂]

    DM368开发 — 毕设之硬件[通俗易懂]这部分将参看相关的毕业论文设计来讲一下DM368的硬件部分。参看：相关论文基于DM368的高清视频监控系统设计与实现–文波一、系统硬件电路详细设计3.1TMS320DM368硬件平台简介TMS320DM368是德州仪器公司（TI）于2010年4月推出的新一代基于Davinci技术的高清视频处理器，内部集成了一颗ARM内核和两个视频图像协处理器，同时内部还集成了一个视频

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月13日
    3
  • 电容论坛(电感电容电压公式)

    电容论坛(电感电容电压公式)

    玉山YGR智能电容以客为尊智能电容器模块是新一代无功补偿模块化装置，结合绿色智能电网的精神应用于绿色电网。产品以微电子技术为基础，集成了自动测控、无功优化、过零切换、多重保护、网络通信、大屏幕显示等技术，实现了低压无功补偿的全部功能，并改变不同的组合构造不同的补偿方案。它是一种智能化、模块化、标准化、集约化的无功补偿装置。 投切电容器组大约20-30毫秒内就完成一个全部动作，这种…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月15日
    38

发表回复

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

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