最近做了一些小程序方面的性能优化,如分包加载,添加骨架屏等,这次主要说一下骨架屏的相关内容。
关于骨架屏,有三种方法:
1.直接请UI同学帮忙P张图,当做loading图放上去。这种方法简单粗暴,但是需要请人帮忙~
2.根据每个页面,自己写一套相同的代码来覆盖样式。这种方法的工程量,你懂的~
3.能不能写个组件呢?该组件自动获取元素位置大小信息来渲染,数据返回后将其卸载。
下面主要说第三种方法~
主框架采用taro,一套代码兼容多端,但是今天这个代码,需要考虑兼容性~
根据上面的思路,我们首先要找到骨架屏的容器,然后找到需要P成灰色的元素,获取该元素的位置大小信息,最后就是渲染了~
获取元素,taro提供了API,Taro.createSelectorQuery()。通过这个API返回一个SelectorQuery对象实例,然后再通过selectAll()来查找骨架中带有特定类的class名,查找之后通过boundingClientRect()获取元素的位置大小信息,把这些信息存放在数组中。
我这边写了两个类,一个是skeleton-radius,渲染圆形;一个是skeleton-rect,渲染长方形。后续大家可以自行扩展。
文字有点多,大家可能看着有点云里雾里的,下面上代码~
// 百度小程序目前不支持跨自定义组件的后代选择器: >>> // 但是H5使用后代选择器(.the-ancestor .the-descendant)的时候,可以自动识别自定义组件内的后代 // 微信小程序支持跨自定义组件都后代选择器(.the-ancestor >>> .the-descendant),可修改为如`.${this.props.selector} >>> .${this.props.selector}-radius` if (process.env.TARO_ENV === 'weapp') { Taro.createSelectorQuery().selectAll(`.${this.props.selector} >>> .${this.props.selector}-radius`) .boundingClientRect().exec(rect => { that.setState({ radiusList: rect[0] }); }); } else { Taro.createSelectorQuery().selectAll(`.${this.props.selector} .${this.props.selector}-radius`) .boundingClientRect().exec(rect => { that.setState({ radiusList: rect[0] }); }); }
大家也看到上面的注释了,如果要在多端运行,可先判断环境,根据环境使用不同的选择器。上面代码是实现一个圆形的灰色区域~大家如果有多个形状的需求的话,可以简单封装一个函数,这里我就不再细说了,具体的可以到Demo详细查看~
细说一下后代选择器的兼容性问题:
接下来就是渲染了,这个比较简单,直接上代码~这里背景色和将要P成条状等的元素的背景色都可以在使用组件时自定义传入,也可以不传,有默认色~
{ radiusList.map(radiusItem => ( )) } { rectList.map(rectItem => ( )) }
到这里,组件已经完成了,使用的时候可以直接引入组件,然后传入selector就可以了,注意,由于数据是动态获取的,页面开始为空,这里就需要mock一些假数据来填充页面了~要覆盖的元素类名必须和组件中的图形类保持一致~
{ showSkeleton && } {userInfo.nickName} { list.map(item => ( {/* 自定义组件外层最好没有元素包裹,否则微信小程序无法识别,但是H5可以识别 */}{item} )) }
看到注释了吗?使用自定义组件时一定要注意噢~自定义组件若被元素报错,微信小程序无法识别到自定义组件内的图形类!!!
最后要说一下适合使用骨架屏的场景:页面结构简单,元素的宽高固定~若元素宽高不固定的话,你写的mock假数据可能和实际渲染出来的页面差距较大,例如瀑布流~
好了,这次的一些收获就到这里了~大家如果有更好的方法,可以留言交流~最后,附上完整的代码地址~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。