Vue页面骨架屏注入方法-创新互联

作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题。关于页面loading状态的展示,主流的主要有loading图和进度条两种。除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行,首屏加载的问题也在困扰着开发者们。那么有没有一个办法,也能让SPA用上骨架屏呢?这就是这篇文章将要探讨的问题。

创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为疏附企业提供专业的做网站、成都网站建设,疏附网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

文章相关代码已经同步到 Github ,欢迎查阅~

一、何为骨架屏

简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。

这个技术在一些以内容为主的APP和网页应用较多,接下来我们以一个简单的Vue工程为例,一起探索如何在基于Vue的SPA项目中实现骨架屏。

二、分析Vue页面的内容加载过程

为了简单起见,我们使用 vue-cli 搭配 webpack-simple 这个模板来新建项目:


vue init webpack-simple vue-skeleton

这时我们便获得了一个最基本的Vue项目:


├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ └── main.js
├── index.html
└── webpack.conf.js


新闻名称:Vue页面骨架屏注入方法-创新互联
网页网址:http://scjbc.cn/article/dcooih.html

其他资讯