骨架屏 —— 使用webpack及vue-cli进行构建

原创 minsong 随笔 Vue 110阅读 2018-12-26 19:56:07 举报

用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading(骨架屏)替代,以优化用户体验。
Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容。常用于文章列表、动态列表页。

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

1.安装插件

npm install vue-skeleton-webpack-plugin

2.创建skeleton.vue及skeleton.js的文件,可以放在src目录下

skeleton.vue 文件如下:

style>标签写在外部没有加载进去,故写到<template>内
样式和模板可以自己修改

skeleton.js文件如下:

3.创建webpack.skeleton.conf.js文件,放在build目录下

4.引用skeleton

在webpack.dev.conf.js及webpack.dev.prod.js文件中加入一下内容

这时骨架屏已经可以使用,下面将在进行样式的优化。

5.修改样式

1.简单堆砌出元素结构

2.背景动画,html结构相同,修改部分css样式

3.元素结构长度变化

6.遇到的问题

跟着步骤一步一步走的时候会遇到问题,有可能是版本不一致的问题,按照提示的内容进行解决,一盘都不会有什么问题

7.参考

请参考

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复