E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序(wepy框架)页面优化之骨架镜使用
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏