preface

Skeleton screen is a common means to improve user experience, not just into the application to see the disgusting experience of page layout chaos, but before most are in the H5 application, this chapter will talk about how to use skeleton screen in wechat small programs, and discuss the implementation principle of skeleton screen.

Before we get to the following, it’s important to know:

  • Applets do not have the concept of pre-rendering!!
  • Applets do not have the concept of pre-rendering!!
  • Applets do not have the concept of pre-rendering!!

Important things are said three times, so we don’t have to say render the page in advance and return it to the user.

But! But! We can still use the skeleton screen component to wait for some asynchronous data update rendering, let’s start talking about it.

Use process

From the above renderings we can see the general effect, let’s talk about the general use of the process, divided into three steps.

  • The introduction of the component

We made the skeleton screen a common component and introduced it into the pages we wanted to add.

// index.json { "usingComponents": { "skeleton": "./.. /.. /components/skeleton/skeleton" } }Copy the code
  • Add component structure to the page root node classskeletonClass name to add to the element you want to draw as a squareskeleton-rectClass name to add to the element that needs to be drawn as a circleskeleton-arcThe name of the class.
// index.wxml <! --> <skeleton isShow="{{loading}}"></skeleton> <view class="skeleton container" skeleton-arc" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/6/16f786fbd44167e9~tplv-t2oaga2asx-image.imag E "></image> <view class=" background-rect "></view> <view class=" background-rect "></view> <view class=" background-rect "></view> <view class="block"  skeleton-rect"></view> <view class="block skeleton-rect"></view> <view class="block skeleton-rect"></view> <view class="block skeleton-rect"></view> <view class="block skeleton-rect"></view> </view>Copy the code
  • Destroy the component at a specific time
// index.js const app = getApp() Page({ data: { loading: SetTimeout (() => {this.setData({loading: false})}, 5000)}})Copy the code

In the small program to use skeleton screen or relatively simple easy~ is it, the main is to pay attention to what time to control the skeleton screen display and hide it.

Realize the principle of

Next we will analyze the implementation of the skeleton screen components of the principle of it, (first shot) is actually very simple easy~.

  • First set the component to absolute positioning (fixed), set a higher level (z-index), the size of the entire screen is 100%.
  • After the page node is mounted (ready()), using the node query method (wx.createSelectorQuery().selectAll()), find all the elements with the related class name, that is, the element added to theskeletonThe class name hasskeleton-rectThe name of the class andskeleton-arcClass name element.
  • After finding all the elements, we store their positions and sizes. We divide the elements into squares and circles and store them in two arrayswx:forRender it and you’re done.

Roughly is how the process, according to this analysis, I believe you can almost write about it, let’s take a look at the implementation process of xiaobian.

Process a

Let’s see the structure and style first. It’s not difficult.

// skeleton.wxml <view style="background: {{bgColor}};" class="skeleton-wrap" catch:touchmove="_none" wx:if="{{isShow}}"> <! > <view class="skeleton-item skeleton-ani" skeleton :for="{{item.width}}px "style="width: {{item.width}}px; height: {{item.height}}px; top: {{item.top}}px; left: {{item.left}}px;" > </view> <! Skeleton-item skeleton-ani" skeleton :for="{{skeletonArc}}" skeleton :key="id" style="width: {{item.width}}px; height: {{item.height}}px; top: {{item.top}}px; left: {{item.left}}px; border-radius: {{item.width}}px;" > </view> </view>Copy the code

The main thing that needs to be noticed is the addition of a small animation effect, which is realized by using the background gradient property linear-gradient of CSS3 and animation. I won’t say much about animation, it is relatively common, and the front end is more or less familiar. If you don’t know, go out and play. For Linear-gradient, I may see less of it, and click on it if I don’t understand it. Am I

// skeleton.wxss .skeleton-wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; overflow: hidden; } .skeleton-item{ position: absolute; background-color: #eee; } /* animation */. Skeleton-ani {background: linear-gradient( 110deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%) #eee; background-size: 200%; background-position-x: 180%; Animation: ANI 1.5s Linear Infinite; } @keyframes ani { to { background-position-x: -20%; }}Copy the code

Process 2

Our skeleton screen is already a component with a fixed layout and a high level, which basically completely covers the page. Now we begin to map the page elements and draw the corresponding square and prototype elements. I set all the elements to be drawn to absolute. Use the wx.createsElectorQuery ().selectAll()API to get the width, height, top, and left of the relevant element to draw the element.

// skeleton.js Component({properties: {isShow: {// whether to display type: Boolean, value: true}, bgColor: Type: String, value: '# FFF '}, selects: {// Add elements to the root of the page type: String, value: 'skeleton'}}, data: selects; Skeleton () {this._fillrect () this._fillcircle ()}, methods: {// Draw the square _fillRect () {// get the relevant nodes of the page, using descendant selectors across components (>>>), Wx.createselectorquery ().selectAll('.${this.data. Selects} >>>.${this.data. Selects}-rect ') .boundingClientRect(rect => { this.setData({ skeletonRect: rect }) }).exec() }, // Draw a circle _fillCircle () {wx.createsElectorQuery ().selectAll('.${this.data.selects} >>>.${this.data.selects}-arc ') .boundingClientRect(rect => { this.setData({ skeletonArc: rect }) }).exec() } } })Copy the code

Note that we use the depth selector >>> symbol to get nodes across custom components. Even if we put the name of the skeleton-rect class and the name of the skeleton-Arc class into the component we define separately, as long as it is below the name of the skeleton class at the root of the page, we can still get information about that element.

The enclosedwx.createSelectorQuery().selectAll()Attributes obtained by the API:

The source code

The above is the content of this article, is not very simple, I did not deceive you? Right out of the box, isn’t it practical? Don’t tell me you can’t read the code above. .

Finally, the source portal. Bye. See you next time.