如何将taro小程序骨架屏实现代码改写为长尾词？

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

最近进行了一些小程序性能优化的工作，包括分包加载、添加骨架屏等。这次主要想聊聊骨架屏的相关内容。关于骨架屏，有三种实现方法：

1. 直接请求UI同学帮忙制作P0张图，当做loading图展示上去。

最近做了一些小程序方面的性能优化，如分包加载，添加骨架屏等，这次主要说一下骨架屏的相关内容。

关于骨架屏，有三种方法：

1.直接请UI同学帮忙P张图，当做loading图放上去。这种方法简单粗暴，但是需要请人帮忙~
2.根据每个页面，自己写一套相同的代码来覆盖样式。这种方法的工程量，你懂的~
3.能不能写个组件呢？该组件自动获取元素位置大小信息来渲染，数据返回后将其卸载。

下面主要说第三种方法~

主框架采用taro，一套代码兼容多端，但是今天这个代码，需要考虑兼容性~

根据上面的思路，我们首先要找到骨架屏的容器，然后找到需要P成灰色的元素，获取该元素的位置大小信息，最后就是渲染了~

获取元素，taro提供了API，Taro.createSelectorQuery()。通过这个API返回一个SelectorQuery对象实例，然后再通过selectAll()来查找骨架中带有特定类的class名，查找之后通过boundingClientRect()获取元素的位置大小信息，把这些信息存放在数组中。