作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题。关于页加载面状态的展示,主流的主要有加载图和进度条两种。除此之外,越来越多的应用采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。随着温泉在前端界的逐渐流行,首屏加载的问题也在困扰着开发者们。那么有没有一个办法,也能让温泉用上骨架屏呢?这就是这篇文章将要探讨的问题。
文章相关代码已经同步到Github,欢迎查阅~
简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。
├──package.json
├──src
│├──App.vue
│├──资产
│└──main.js
├──index . html
└──webpack.conf.js
安装完了依赖以后,便可以通过<代码> npm运行dev>
可以看到,DOM里 面有且仅有一个div #应用,当js被执行完成之后,此div #应用会被整个替换掉,因此,我们可以来做一下实验,在此div里面添加一些内容:
打开chrome的开发者工具,在网络里面找到节气门功能,调节网速为“慢3 g”,刷新页面,就能看到页面先是展示了三句“你好骨架”,待js加载完了才会替换为原本要展示的内容。
& lt; template>
& lt; div class="框架页面”比;
& lt; div类=" skeleton-nav "祝辞& lt;/div>
& lt; div类=" skeleton-swiper "祝辞& lt;/div>
& lt; ul类=皊keleton-tabs”比;
8 & lt;李v=拔摇眂lass=皊keleton-tabs-item”祝辞& lt; span> & lt;/span> & lt;/li>
& lt;/ul>
& lt; div类=" skeleton-banner "祝辞& lt;/div>
& lt; div)=6“我”class=皊keleton-productions”祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt; style>
.skeleton {
位置:相对;
高度:100%;
溢出:隐藏;
填充:15 px;
box-sizing: border-box;
背景:# fff;
}
.skeleton-nav {
高度:45 px;
背景:# eee;
margin-bottom: 15 px;
}
.skeleton-swiper {
身高:160 px;
背景:# eee;
margin-bottom: 15 px;
}
.skeleton-tabs {
list-style:没有;
填充:0;
保证金:0 -15 px;
显示:flex;
flex-wrap:包装;
}
.skeleton-tabs-item {
宽度:25%;
高度:55 px;
box-sizing: border-box;
text-align:中心;
margin-bottom: 15 px;
}
.skeleton-tabs-item跨度{
显示:inline-block;
宽度:55 px;
高度:55 px;
border - radius: 55 px;
背景:# eee;
}
.skeleton-banner {
高度:60 px;
背景:# eee;
margin-bottom: 15 px;
}
.skeleton-productions {
高度:20 px;
margin-bottom: 15 px;
背景:# eee;
}
& lt;/style>
