javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 微信小程序骨架屏实现

微信小程序骨架屏的应用与实现步骤详细记录

作者:猪痞恶霸

所谓骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容,这篇文章主要给大家介绍了关于微信小程序骨架屏的应用与实现的相关资料,需要的朋友可以参考下

什么是骨架屏

骨架屏是作为一种首次渲染加载优化的一种方法

我们打开一个应用后,应用会通过ajax来请求数据,而在这段空缺的时间,没有数据,内容缺失,这对于用户的感觉很不好,所以我们需要在这个时间段内通过骨架屏来填充这个空缺。

如上图所示,一个是没有内容,一个是骨架屏的填充,所以在加载的这一秒内给用户以骨架屏形式的填充是很有必要的。

小程序骨架屏的实现

1. 生成页面骨架

微信小程序开发者工具提供了生成骨架屏的工具,所以我们可以快速高效得实现加载骨架屏

点击三个点,生成骨架屏,即可在对应page文件下生成两个文件,文件中包括了骨架屏的使用方式。

2. 骨架屏的应用

工具生成的骨架屏文件中包含了使用方式,下面我拿person目录举例。

3. 使用注意

4. 思考后的封装

骨架屏加载函数,我们每个页面都需要进行调用,在我写完一座xx山后意思到了这件事情,出现了这种情况

好了,我们改过自新

总结

到此这篇关于微信小程序骨架屏的应用与实现的文章就介绍到这了,更多相关微信小程序骨架屏实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文