微信小程序---骨架屏实现，实现起来超级简单-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序---骨架屏实现，实现起来超级简单。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

请求数据时都会出现一定的延迟，屏幕从而会出现一大片空白，以前对于这段等待时间的处理大多数都是采用菊花图加载动画或者类似于这种的加载动画。

这种方式请求时页面会卡住，直到请求完成，用户期间无法进行任何的操作，只能看着加载动效图，给人一种死机的感觉，体验差。为了进一步提升用户的体验，于是就出现了另一种加载方式——骨架屏（ Skeleton Screen ）

微信小程序---骨架屏实现，实现起来超级简单

未加载完成数据后，展示空白灰色盒子，加载成功后才展示内容

1、微信开发者工具可以为当前页面生成骨架屏，工具入口位于模拟器面板右下角三点处。生成之后会多出两个文件。index.skeleton.wxml里面有使用步骤

微信小程序---骨架屏实现，实现起来超级简单

文章来源地址https://www.toymoban.com/news/detail-503389.html

2、引用文件，在index.wxml引用骨架屏，通过skeleton_loading来控制显示/隐藏微信小程序---骨架屏实现，实现起来超级简单

在index.wxss里面调用骨架屏样式

微信小程序---骨架屏实现，实现起来超级简单

在index.js里面data将skeleton_loading变为false，等数据请求成功后，将其变为true即可。

注：1、当页面布局改变之后，骨架屏也要重新成功

2、生成骨架屏后，出现有些图片一样会展示，可以修改index.wxml或index.js将静态资源动态和请求成功后同步获取。切记不要直接更改生成骨架屏文件，除非你只想要一次性，不然后续更改很麻烦。

到了这里，关于微信小程序---骨架屏实现，实现起来超级简单的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

微信小程序---骨架屏实现，实现起来超级简单