小程序(wepy框架)页面优化之骨架镜使用

最近一直在玩 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

**
小程序(wepy框架)页面优化之骨架镜使用
我们使用两个方法 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(){}中使用
小程序(wepy框架)页面优化之骨架镜使用
开始获取父级中的元素

注释A：  例如我们将父级中 矩形的每个元素加一个class名为 skeleton-rect  每个圆形dom 增加一个class名为 skeleton-cirl,  那么我们就可以按照上面的形式写了

在父级 index.wpy 中引入
小程序(wepy框架)页面优化之骨架镜使用
showSkeleton 是要做一个延时的效果你可以写

onLoad() {
	setTimeout(() => {
        this.showSkeleton = true;
        this.$apply();
    })
}

记得在 data = { showSkeleton : false }

电脑在公司了明天穿到github上地址明天会给希望对你有所帮助记得给个star哦
地址