Recently, I have done some performance optimizations in mini programs, such as subcontracting loading, adding skeleton screens, etc. This time I will mainly talk about the relevant content of skeleton screens.
There are three ways to do the skeleton screen:
1. Directly ask the UI classmate to help you apply the picture and put it on as a loading picture. This method is simple and crude, but you need help.
2. Write the same set of code to overwrite the style according to each page. You know the engineering quantity of this method ~
3. Can you write a component? This component automatically obtains element position size information for rendering, and uninstalls the data after it is returned.
The following is the third method ~
The main framework uses taro, and a set of codes is compatible with multiple ends, but today this code needs to be considered for compatibility~
According to the above idea, we first need to find the container of the skeleton screen, then find the element that needs to be P to gray, obtain the position and size information of the element, and finally render it~
Get elements, taro provides API,()。Return a SelectorQuery object instance through this API, and then passselectAll()To find the class name with a specific class in the skeleton, and then search throughboundingClientRect()Get the position and size information of the element and store this information in the array.
I wrote two classes here, one is skeleton-radius, which renders the circle; the other is skeleton-rect, which renders the rectangle. You can expand on your own in the future.
There are a lot of texts, and you may look a little confused. Here is the code~
// Baidu applet currently does not support descendant selectors across custom components: >>> // However, when H5 uses the descendant selector (.the-ancestor.the-descendant), it can automatically identify the descendants in the custom component. // WeChat applet supports descendant selectors across custom components (.the-ancestor >>> .the-descendant), which can be modified to such as `.${} >>> .${}-radius` if (.TARO_ENV === 'weapp') {
().selectAll(`.${} >>> .${}-radius`)
.boundingClientRect().exec(rect => {
({
radiusList: rect[0]
});
});
}
else {
().selectAll(`.${} .${}-radius`)
.boundingClientRect().exec(rect => {
({
radiusList: rect[0]
});
});
}
You have also seen the comment above. If you want to run on multiple ends, you can first judge the environment and use different selectors according to the environment. The above code implements a circle gray area~ If you have multiple shapes, you can simply encapsulate a function. I won't go into details here. For details, you can go to Demo to view it in detail~
Let’s talk about the compatibility issues of descendant selectors in detail:
- Baidu applets currently do not support descendant selectors across custom components: >>>.
- However, when H5 uses the descendant selector (.the-ancestor .the-descendant), it can automatically identify descendants in the custom component. When using a custom component, whether there is element wrapping on the outer layer can be recognized as the specified class selector inside the custom component.
- WeChat applets support descendant selectors (.the-ancestor >>> .the-descendant) across custom components, but when using custom components, the outer layer cannot nest elements, otherwise it will not be recognized.
Next is rendering. This is relatively simple. Just put the code directly. Here, the background color and the background color of the elements that will be P into strips, etc. can be customized when using the component, or it can be passed without passing it. There is a default color~
<View className='skeleton-container' style={{background: `${bgColor}`}}>
{
(radiusItem => (
<View className='skeleton-item skeleton-item-radius' style={{width: `${}PX`, height: `${}PX`,
background: `${itemColor}`, top: `${}PX`, left: `${}PX`}}
/>
))
}
{
(rectItem => (
<View className='skeleton-item' style={{width: `${}PX`, height: `${}PX`,
background: `${itemColor}`, top: `${}PX`, left: `${}PX`}}
/>
))
}
</View>
At this point, the component has been completed. When using it, you can directly introduce the component and then pass it into the selector. Note that since the data is obtained dynamically and the page is empty, you need to mock some fake data to fill the page. The element class name to be covered must be consistent with the graphics class in the component.
<View className='container' style={{fontSize: '20PX'}}>
{
showSkeleton && <Skeleton
selector='skeleton'
bgColor='pink'
itemColor='skyblue'
/>
}
<View className='skeleton'>
<View className='userInfo'>
<Image
src={}
alt='User Avatar'
className='userInfo-avatar skeleton-radius'
/>
<Text>{}</Text>
</View>
<View>
{
(item => (
<View className='skeleton-rect' style={{marginBottom: '30PX'}}>{item}</View>
))
}
</View>
{/* It is best not to have element wrapping on the outer layer of custom components, otherwise the WeChat applet will not be recognized, but H5 can be recognized */}
<List />
</View>
</View>
Have you seen the comment? Be sure to pay attention when using custom components ~ If the custom component is reported by an element, the WeChat applet cannot recognize the graphics class in the custom component! ! !
Finally, I would like to talk about the scene suitable for using skeleton screens: the page structure is simple, the width and height of the elements are fixed~ If the width and height of the elements are not fixed, the fake mock data you wrote may be far from the actual rendered page, such as waterfall flow~
Okay, that’s all for some of the gains this time~ If you have a better way, you can leave a message to communicate~ Finally, attach the complete code address~
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.