taro小程序添加骨架屏的实现代码

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

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

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

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详细查看~ 细说一下后代选择器的兼容性问题：

1. 百度小程序目前不支持跨自定义组件的后代选择器: >>>。
2. 但是H5使用后代选择器(.the-ancestor .the-descendant)的时候，可以自动识别自定义组件内的后代。使用自定义组件时，外层是否有元素包裹，都可识别到自定义组件内部的指定类选择器。
3. 微信小程序支持跨自定义组件的后代选择器(.the-ancestor >>> .the-descendant)，但使用自定义组件时，外层不能嵌套元素，否则无法识别。

接下来就是渲染了，这个比较简单，直接上代码~这里背景色和将要P成条状等的元素的背景色都可以在使用组件时自定义传入，也可以不传，有默认色~

 <View className='skeleton-container' style={{background: `${bgColor}`}}>
 {
 radiusList.map(radiusItem => (
 <View className='skeleton-item skeleton-item-radius' style={{width: `${radiusItem.width}PX`, height: `${radiusItem.height}PX`,
 background: `${itemColor}`, top: `${radiusItem.top}PX`, left: `${radiusItem.left}PX`}}
 />
 ))
 }
 {
 rectList.map(rectItem => (
 <View className='skeleton-item' style={{width: `${rectItem.width}PX`, height: `${rectItem.height}PX`,
 background: `${itemColor}`, top: `${rectItem.top}PX`, left: `${rectItem.left}PX`}}
 />
 ))
 }
 </View>

到这里，组件已经完成了，使用的时候可以直接引入组件，然后传入selector就可以了，注意，由于数据是动态获取的，页面开始为空，这里就需要mock一些假数据来填充页面了~要覆盖的元素类名必须和组件中的图形类保持一致~

 <View className='container' style={{fontSize: '20PX'}}>
 {
 showSkeleton && <Skeleton
 selector='skeleton'
 bgColor='pink'
 itemColor='skyblue'
 />
 }
 <View className='skeleton'>
 <View className='userInfo'>
 <Image
 src={userInfo.avatarUrl}
 alt='用户头像'
 className='userInfo-avatar skeleton-radius'
 />
 <Text>{userInfo.nickName}</Text>
 </View>
 <View>
 {
 list.map(item => (
 <View className='skeleton-rect' style={{marginBottom: '30PX'}}>{item}</View>
 ))
 }
 </View>
 {/* 自定义组件外层最好没有元素包裹，否则微信小程序无法识别，但是H5可以识别 */}
 <List />
 </View>
 </View>

看到注释了吗？使用自定义组件时一定要注意噢~自定义组件若被元素报错，微信小程序无法识别到自定义组件内的图形类！！！

最后要说一下适合使用骨架屏的场景：页面结构简单，元素的宽高固定~若元素宽高不固定的话，你写的mock假数据可能和实际渲染出来的页面差距较大，例如瀑布流~

好了，这次的一些收获就到这里了~大家如果有更好的方法，可以留言交流~最后，附上完整的代码地址~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

taro小程序骨架屏 小程序taro骨架屏