Shulou(Shulou.com)05/31 Report--

This article mainly explains "how WeChat Mini Programs realizes the skeleton screen". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought and go deep into it slowly. Let's study and learn how WeChat Mini Programs realizes the skeleton screen.

I. demonstration

2. Description:

Implementation idea: the default data is needed to perfectly cope with the situation of list,wx:if and the style in which the width of flex is supported by content.

Alternative idea: similar to the imageLoader loader: show the default picture first, and then display the real picture after getting the data

Specific implementation:

The page prepares a default data: defaultData

In xml:

When the page onload, data=defaultData

At this point: watchData receives data for the first time (when the first time is onload), relies on the default data, opens the card slot container, and opacity:0 itself.

After that, close the skeleton screen after receiving the data.

Advantages:

1. Easy to maintain: there is no extra xml on the page. There is no extra css. You only need to maintain a copy of the default data.

two。 More elegant, more authentic: multiple requests, you will see batch replacement. The replacement does not require a successful full request.

3. Can coexist with imageLoader, but will not appear. After the skeleton screen such as Meituan is missing, the picture area still appears a brief blank.

4. Customizable:

Can coexist: text, picture / imageLoader, or something else. Low invasion

The skeleton screen is not a complete one, but an items, and can have different styles or transitions

It can perfectly support the skeleton screen when loading by touching the bottom.

Note:

1. Custom-class: need to pass the same [border-radius] as the card slot; optional [background color], or other

2. Custom-class: width and height do not need to be passed. The default data is to support width and height.

Third, the code:

Import {extendComponent} from'.. / common/component';extendComponent ({properties: {watchData: null,// observe the corresponding request object transition: {/ / transition name, corresponding name type:String, value:null}}, observers: {"watchData": function (newVal) {this.data.counter+=1; if (this.data.counter > = 2) {this.setData ({success:true}) }, data: {counter:0,// displays the skeleton screen for the first time, and then the real node. Success:false / / irreversible, only false- > true}}) Thank you for your reading. The above is the content of "how to achieve the skeleton screen by WeChat Mini Programs". After the study of this article, I believe you have a deeper understanding of how WeChat Mini Programs realizes the skeleton screen, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.