Tutorial on how to load animation method in WeChat applet loading component

小云云
Release: 2017-12-11 09:12:38
Original
9491 people have browsed it

WeChat mini-programs are becoming more and more popular. This article mainly introduces the usage of the loading component of the WeChat mini-program to display the loading animation. It analyzes the related event operations and attribute setting skills of the loading component to display the loading animation in the form of examples. I hope it can help. Everyone.

1. Effect display

##2. Key code

① index.wxml

<loading hidden="{{loadingHidden}}">
 加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>
Copy after login

② index.js

Page({
  data: {
    loadingHidden: true
  },
  loadingTap: function(){
    this.setData({
     loadingHidden: false
    });
    var that = this;
    setTimeout(function(){
     that.setData({
       loadingHidden: true
     });
     that.update();
    }, 3000);
  }
})
Copy after login

Have you learned it? Hurry up and do it yourself.

Related recommendations:

Summary of functions of WeChat mini program

Example of WeChat mini program using video component to play video function

Detailed explanation of WeChat mini program video, music, and picture components

The above is the detailed content of Tutorial on how to load animation method in WeChat applet loading component. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template