微信小程序骨架屏如何实现示例代码？

本文共计813个文字，预计阅读时间需要4分钟。

目录- 什么是骨架屏- 小程序中骨架屏的生成方式- 引入方法- 显示与隐藏- 优化用户体验- 骨架屏是开发者更喜欢的表现方式- 骨架屏是首屏占位的一种表现方式- 骨架屏不会让浏览器因加载中而卡顿

目录

• 什么是骨架屏
• 小程序中骨架屏的生成方式
• 引入方法
• 显示与隐藏

为了优化用户体验，骨架屏一直是开发者比较喜欢的表现方式，也就是首屏占位的一种表现方式，不会让浏览者因为长时间的等待而焦躁。小程序中骨架屏的实现还是比较简单的，但是没用过的同学难免会误入歧途，今天就分享一下小程序中骨架屏的实现。

什么是骨架屏

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。为了开发的便利，开发者工具提供了自动生成骨架屏代码的能力。

小程序中骨架屏的生成方式

微信开发者工具可以为当前页面生成骨架屏，工具入口位于模拟器面板右下角三点处。

引入方法

骨架屏代码通过小程序模板（template）的方式引入 以 pages/index/index 页面为例，引入方式如下。