案例:使用

现已经在支付的项目使用

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

 

Skeleton Screen

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

请求处理

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

Skeleton Screen优势

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

二、项目中的使用

项目的引入:

注册全局
组件的目录

引入说明

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>
 

效果

git 仓库

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

分之:feature_share_skeleton

Skeleton Screen -- 骨架屏--应用的更多相关文章

  1. Skeleton Screen — 骨架屏

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

  2. Vue单页面骨架屏实践

    github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

  3. Vue页面骨架屏(二)

    实现思路 参考原文中在构建时使用 Vue 预渲染骨架屏一节介绍的思路,我将骨架屏也看成路由组件,在构建时使用 Vue 预渲染功能,将骨架屏组件的渲染结果 HTML 片段插入 HTML 页面模版的挂载点 ...

  4. 简单实现骨架屏 (Skeleton Screens)

          近年,国内外各大网站都引入骨架屏(Skeleton Screens)技术来提高用户体验.相比于之前的Loading动画,骨架屏页面更容易让用户产生一种错觉,页面快加载完了.骨架屏实现原理很 ...

  5. 使用 Skeleton Screen 提升用户感知体验

    1024程序猿节"愿世界和平,没有bug",腾讯云社区向改变世界的程序猿致敬! 作者:陈纬杰 一直以来,无论是web还是iOS.android的应用中,为了提升应用的加载等待这段时 ...

  6. 骨架屏(page-skeleton-webpack-plugin)初探

    作者:小土豆biubiubiu 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/2436173500265335 微信公众 ...

  7. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  8. Vue 项目骨架屏注入与实践

    作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...

  9. 微信小程序 - 深度定义骨架屏(提示)

    此举每个页面必须创建对应的css样式,比较麻烦(但非常准确),推荐使用组件化的skeleton组件 原理很简单:知晓一下this.setData原理,就OK了,可能大家会因此了解到全屏加载loadin ...

随机推荐

  1. [LOJ10121] 与众不同

    题目类型:\(DP\)+\(RMQ\) 传送门:>Here< 题意:给定一个长度为\(N\)的序列,并给出\(M\)次询问.询问区间\([L,R]\)内的最长完美序列.所谓完美序列就是指连 ...

  2. centos2.6.18升级到2.6.39

    本来想升级到最新版本4.6的,但是不成功,即使3.4也不成功,暂且先升级到2.x最新版本. 步骤如下: 一 下载源码 https://www.kernel.org/pub/linux/kernel/ ...

  3. bzoj2253 纸箱堆叠

    题目链接 题意 求三元组的严格上升子序列 思路 先考虑暴力\(dp\)一下 for(int i = 1;i <= n;++i) for(int j = 1;j < i;++j) if(x[ ...

  4. 洛谷P1258 小车问题(题解)

    https://www.luogu.org/problemnew/show/P1258(题目传送) 看题的第一眼就把题归为二分题,一直向着二分的方向走,却忽略了数学的推理.推理一番后(看了题解),发现 ...

  5. ajax实现长连接

    项目需求:需要实时的读取日志文件里的数据,并且使用Echart实时更新折线图. 使用ajax实现客户端与服务器端的数据传输. 目的:我想通过ajax与服务器建立一个长连接,服务器会不断的传输数据给前台 ...

  6. mac安装postman

    [在线方式]: 1. chrome扩展中搜postman,选择Postman Interceptor 添加到chrome. 2.安装完毕后,点击地址栏右边对应的按钮 点击 Postman Chrome ...

  7. js深拷贝

    // 判断是否为对象 function isObject(o) { return (typeof o === 'object' || typeof o === 'function') &&am ...

  8. 第六节:WebApi的部署方式(自托管)

    一. 简单说明 开篇就介绍过WebApi和MVC相比,其中优势之一就是WebApi可以不依赖于IIS部署,可以自托管,当然这里指的是 .Net FrameWork 下的 WebApi 和 MVC 相比 ...

  9. Quartz C#使用

    参考:https://www.cnblogs.com/lazyInsects/p/8075487.htmlQuartz是一款比较好用的定时任务执行工具类,虽然我们平时也可以自己写代码实现定时执行,但是 ...

  10. 五十二、linux 编程——网络介绍

    52.1 网络介绍 使用远程资源 共享信息.程序和数据 分布处理 52.1.1 协议的概念 计算机网络中实现通信必须有一些约定,如对速率.传输代码.代码结构.传输控制步骤和出错控制等约定,这些约定即被 ...