Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In order to optimize the user experience, the skeleton screen has always been the preferred representation of the developer, which is a placeholder for the first screen and doesn’t make the viewer anxious because of the long wait. Small program skeleton screen implementation is relatively simple, but have not used the students will inevitably go astray, today to share a small program skeleton screen implementation.

What is a skeleton screen

A skeleton screen is a blank version of the page, usually sketched out with gray blocks before the page is fully rendered, and replaced with real content after the data is loaded. Usually in the small program, we need to manually maintain the skeleton screen code, when the business changes, also need to adjust the skeleton screen code. For ease of development, developer tools provide the ability to automatically generate skeleton screen code.

Small procedures in the skeleton screen generation

The wechat developer tool can generate a skeleton screen for the current page. The tool entrance is located at three points in the lower right corner of the simulator panel.

Introduce methods

The skeleton screen code is introduced in the form of template. The pages/index/index page is used as an example.

<! -- pages/index/index.wxml --><import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/>
Copy the code
/* pages/index/index. WXSS */ @import "index.skeleton. WXSS ";Copy the code

Show and Hide

As with normal templates, wx:if controls show hide. You can set lazy loading or hide the skeleton screen after all data requests for the page have been successful.

Lazy-loaded code is placed in the onLoad lifecycle as follows:

   // Progressively load data, progressively hide loading
  progressiveLoad() {
    setTimeout(() = > {
      this.setData({
        loading: false})},1000)},onLoad() {
    this.progressiveLoad()  // Progressively load data, progressively hide loading
  }
Copy the code

Developers can also set text, picture, button color and shape as needed, while ignoring or hiding some page elements based on excludes, remove, hide, etc., for better display. For details, see the official documentation of the skeleton screen