hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 小程序 - 正文 君子好学,自强不息!

什么是骨架屏(Skeleton Screen)?_微信小程序

2020-06-19小程序ki4网16°c
A+ A-

骨架屏

最近在项目不时有用到骨架屏的需求,所以抽时间对骨架屏的计划作了一下调研,骨架屏的实践已经有许多了,也有许多人对本身的计划作了引见.在这里根据个人的明白做了一个汇总和分类,分享给人人。

引荐教程:《小程序开发》《小程序视频教授教养》

关于骨架屏(简介)

骨架屏就是在页面数据还没有加载前先给用户展现出页面的大抵构造,直到要求数据返回后再衬着页面,补充进须要显现的数据内容。常用于文章列表、动态列表页等相对比较划定规矩的列表页面。
许多项目中都有运用:ex:饿了么h5版本,知乎,facebook等网站中都有运用。
借个图举例以下:

两类用处

简介中作了关于用处的申明,然则依然能够继承细分:

  • 作为spa中路由切换的loading,连系组件的生命周期和ajax要求返回的机遇来运用.

  • 作为首屏衬着的优化.

第一类用处

第一类用处须要本身编写骨架屏,引荐两个成熟轻易定制的svg组件定制为骨架屏的计划

  • react-content-loader

  • vue-content-loader

作为首屏衬着(自动化计划)

该计划是饿了么在骨架屏的实践中总结出的一套计划:

  • 骨架屏的dom构造和css经由历程离线生成后构建的时刻注入模板中的节点下面.

  • 道理相干eleme骨架屏插件完成道理

  • 计划的项目地点:page-skeleton-webpack-plugin

  • 运用时刻的注重点:

1、cssUnit的设置: 须要运用自适应的单元,根据文档给出的挑选局限选,直接用 px 生成的比例会不合适

2、puppeteer有也许80M, 装置的时刻有大概不能一次下载胜利.

  • 道理:

经由历程 puppeteer 在服务端操控 headless Chrome 翻开开发中的须要生成骨架屏的页面,在守候页面加载
衬着完成以后,在保存页面规划款式的前提下,经由历程对页面中元素举行删减或增加,对已有元素经由历程层叠样
式举行掩盖,如许到达在不转变页面规划下,隐蔽图片和笔墨,经由历程款式掩盖,使得其展现为灰色块。然后
将修改后的 HTML 和 CSS 款式提取出来,如许就是骨架屏了.

其他计划

连系ssr render/prerender来运用:

  • 事前编写好骨架屏组件经由历程ssr render 剖析注入html文件中(除了须要本身编写外实在历程类似于上面的自动化计划)参考文章

  • 1中事前编写好的骨架屏组件能够用图片替代 (svg) ;或许设计师设计好.

小程序的骨架屏

  • 不存在预衬着的观点,然则照样能够经由历程本身预先编写骨架屏组件放在页面中,比及异步要求的数据返来后更新页面。

相干教程引荐:《CSS基础教程》《PHP入门到通晓》

以上就是什么是骨架屏(Skeleton Screen)?的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
什么是骨架屏(Skeleton Screen)?_微信小程序

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>