微信小程序---骨架屏实现,实现起来级
一、什么是骨架屏?
骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。通常在小程序中,我们需要手工维护骨架屏的代码,当业务变更时,同样需要对骨架屏代码进行调整。
二、为什么要用骨架屏
请求数据时都会出现一定的延迟,屏幕从而会出现一大片空白,以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于这种的加载动画。
这种方式请求时页面会卡住,直到请求完成,用户期间无法进行任何的操作,只能看着加载动效图,给人一种死机的感觉,体验差。为了进一步提升用户的体验,于是就出现了另一种加载方式——骨架屏( Skeleton Screen )
三、骨架屏效果
未加载完成数据后,展示空白灰色盒子,加载成功后才展示内容
四、实现方法
1、微信开发者工具可以为当前页面生成骨架屏,工具入口位于模拟器面板右下角三点处。生成之后会多出两个文件。index.skeleton.wxml里面有使用步骤
2、引用文件,在index.wxml引用骨架屏,通过skeleton_loading来控制显示/隐藏
在index.wxss里面调用骨架屏样式
在index.js里面data将skeleton_loading变为false,等数据请求成功后,将其变为true即可。
注:1、当页面布局改变之后,骨架屏也要重新成功
2、生成骨架屏后,出现有些图片一样会展示,可以修改index.wxml或index.js将静态资源动态和请求成功后同步获取。切记不要直接更改生成骨架屏文件,除非你只想要一次性,不然后续更改很麻烦。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfihkc
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01