最近一直在玩 B 站， 然后发现B站里面有骨架镜的功能，因为之前在写小程序的时候也想用，但是无奈项目紧迫没时间研究，然后今天花了一天的时间，下面说说如何应用。
理想是 写一个组件，然后各个页面只要引入该组件就有相关功能，OK 下面封装一个
首先介绍官方为我们提供的 API 之 wx.createSelectorQuery() 然后地下给了我们几个用法 我们一一介绍一下
wx.createSelectorQuery().selectAll(`.${class名字/id名字}`)他返回的是我们所选中的dom数组
wx.createSelectorQuery().selectAll(`.${class名字/id名字}`).boundingClientRect()看API能看出来 boundingClientReact 是返回相关dom的属性 例如 宽、高等。之后执行 .exec()，boundingClientRect() 返回的信息会在 callback中返回
wx.createSelectorQuery().selectAll(`.${class名字/id名字}`).boundingClientRect().exec()**
skeleton.wpy
**
我们使用两个方法 geRecList() 和 getCircleList() 分别获取 父级（引用该组件的页面）所有 相关（注释 A）的dom元素，然后对他们进行使用
template view style="width: {{systerInfo.screenWidth}}px; height: {{systerInfo.screenHeight}}px; background-color: {{bgcolor}}; position: absolute; left:0; top:0; z-index:9998; overflow: hidden;" view wx:for="{{storeRectListAry}}" item="item" class="chiaroscuro" style="width: {{item.width}}px; height: {{item.height}}px; background-color: rgb(194, 207, 214); position: absolute; left: {{item.left}}px; top: {{item.top}}px" /view view wx:for="{{storeRadiusListAry}}" class="chiaroscuro" style="width: {{item.width}}px; height: {{item.height}}px; background-color: rgb(194, 207, 214); border-radius: {{item.width}}px; position: absolute; left: {{item.left}}px; top: {{item.top}}px" /view/view/template例如 循环遍历 storeRectListAry 这个数组的时候 他们每个 item 就是每个dom元素的属性集合 所以我们可以在后面使用 item.width 来根据该dom的宽高进行绘制
两个循环是因为我们考虑到 矩形 和 圆形
然后在组件onload(){}中使用
开始获取父级中的元素
注释A： 例如我们将父级中 矩形的每个元素加一个class名为 skeleton-rect 每个圆形dom 增加一个class名为 skeleton-cirl, 那么我们就可以按照上面的形式写了 在 父级 index.wpy 中引入
showSkeleton 是要做一个延时的效果 你可以写
onLoad() {setTimeout(() = { this.showSkeleton = true; this.$apply(); })}记得在 data = { showSkeleton : false }
电脑在公司了 明天穿到github上 地址明天会给 希望对你有所帮助 记得给个star哦
地址
