Skeleton Screen -- 骨架屏--应用
案例:使用
现已经在支付的项目使用
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验
Skeleton Screen
Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页。
请求处理
无论是PC端还是移动端,只要有数据请求都会出现一定的延迟时间,之前对于这段等待时间的处理也是各不相同。同步请求中页面会卡住,直到请求完成,用户期间无法进行任何操作,有一种死机的感觉,体验较差。异步请求中大多数会以锁屏的loading动画过渡等待时间,于是,也就出现了制作不同loaidng状态的炫技。
Skeleton Screen优势
锁屏loading在一定程度限制了用户的操作,所以为了进一步提升用户体验,Skeleton Screen被越来越多的公司产品采用,如:Facebook、简书、知乎、掘金等,在动态、文章加载时预先渲染出结构布局,数据加载完成后再填充数据显示,这样的好处在于不干扰用户操作,使用户对于加载的内容有一个大致的预期,特别是弱网络环境下极大的优化了用户体验。
二、项目中的使用
项目的引入:
引入说明
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
|
---|---|
- | - |
例子一:
效果
git 仓库
http://git.daojia-inc.com/fe-jz/universal-pay/
分之:feature_share_skeleton
Skeleton Screen -- 骨架屏--应用的更多相关文章
- Skeleton Screen — 骨架屏
用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验. Sk ...
- Vue单页面骨架屏实践
github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...
- Vue页面骨架屏(二)
实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...
- 简单实现骨架屏 (Skeleton Screens)
近年,国内外各大网站都引入骨架屏(Skeleton Screens)技术来提高用户体验.相比于之前的Loading动画,骨架屏页面更容易让用户产生一种错觉,页面快加载完了.骨架屏实现原理很 ...
- 使用 Skeleton Screen 提升用户感知体验
1024程序猿节"愿世界和平,没有bug",腾讯云社区向改变世界的程序猿致敬! 作者:陈纬杰 一直以来,无论是web还是iOS.android的应用中,为了提升应用的加载等待这段时 ...
- 骨架屏(page-skeleton-webpack-plugin)初探
作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 微信公众 ...
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
- Vue 项目骨架屏注入与实践
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...
- 微信小程序 - 深度定义骨架屏(提示)
此举每个页面必须创建对应的css样式,比较麻烦(但非常准确),推荐使用组件化的skeleton组件 原理很简单:知晓一下this.setData原理,就OK了,可能大家会因此了解到全屏加载loadin ...
随机推荐
- [LOJ10121] 与众不同
题目类型:\(DP\)+\(RMQ\) 传送门:>Here< 题意:给定一个长度为\(N\)的序列,并给出\(M\)次询问.询问区间\([L,R]\)内的最长完美序列.所谓完美序列就是指连 ...
- centos2.6.18升级到2.6.39
本来想升级到最新版本4.6的,但是不成功,即使3.4也不成功,暂且先升级到2.x最新版本. 步骤如下: 一 下载源码 https://www.kernel.org/pub/linux/kernel/ ...
- bzoj2253 纸箱堆叠
题目链接 题意 求三元组的严格上升子序列 思路 先考虑暴力\(dp\)一下 for(int i = 1;i <= n;++i) for(int j = 1;j < i;++j) if(x[ ...
- 洛谷P1258 小车问题(题解)
https://www.luogu.org/problemnew/show/P1258(题目传送) 看题的第一眼就把题归为二分题,一直向着二分的方向走,却忽略了数学的推理.推理一番后(看了题解),发现 ...
- ajax实现长连接
项目需求:需要实时的读取日志文件里的数据,并且使用Echart实时更新折线图. 使用ajax实现客户端与服务器端的数据传输. 目的:我想通过ajax与服务器建立一个长连接,服务器会不断的传输数据给前台 ...
- mac安装postman
[在线方式]: 1. chrome扩展中搜postman,选择Postman Interceptor 添加到chrome. 2.安装完毕后,点击地址栏右边对应的按钮 点击 Postman Chrome ...
- js深拷贝
// 判断是否为对象 function isObject(o) { return (typeof o === 'object' || typeof o === 'function') &&am ...
- 第六节:WebApi的部署方式(自托管)
一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...
- Quartz C#使用
参考:https://www.cnblogs.com/lazyInsects/p/8075487.htmlQuartz是一款比较好用的定时任务执行工具类,虽然我们平时也可以自己写代码实现定时执行,但是 ...
- 五十二、linux 编程——网络介绍
52.1 网络介绍 使用远程资源 共享信息.程序和数据 分布处理 52.1.1 协议的概念 计算机网络中实现通信必须有一些约定,如对速率.传输代码.代码结构.传输控制步骤和出错控制等约定,这些约定即被 ...