Heim > WeChat-Applet > Mini-Programmentwicklung > Die WeChat-Applet-Entwicklung verwendet eine Ladekomponente, um die Ladeanimationsmethode anzuzeigen

Die WeChat-Applet-Entwicklung verwendet eine Ladekomponente, um die Ladeanimationsmethode anzuzeigen

高洛峰
Freigeben: 2017-03-16 13:56:45
Original
5377 Leute haben es durchsucht

Wenn wir das WeChat-Applet lernen, sollten wir auf Situationen stoßen, in denen wir warten müssen, bis Bilder oder Animationen geladen werden. Wie sollten wir diesen Wartebildschirm programmieren? Heute werden wir so ein kleines Tutorial schreiben.
Sehen wir uns zuerst die Darstellungen an:

Die WeChat-Applet-Entwicklung verwendet eine Ladekomponente, um die Ladeanimationsmethode anzuzeigen

Wichtiger Code
1. Startseitencode:

<view class="copyright">
    <view class="copyright_item">CopyRight:All Right Reserved</view>
    <view class="copyright_item">原创作者:HTML51.COM</view>
    <view class="copyright_item">微信小程序开发者社区:51小程序</view>
    <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
    <view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入弹出loading加载框页面</button></view>
</view>
Nach dem Login kopieren

2..js-Code

Page({
    data: {
        loadingHidden: true
    },
    loadingTap: function(){
        this.setData({
          loadingHidden: false
        });
        var that = this;
        setTimeout(function(){
          that.setData({
              loadingHidden: true
          });
          that.update();
        }, 3000);
    }
})
Nach dem Login kopieren

Seitencode wird geladen

<loading hidden="{{loadingHidden}}">
        加载中...
</loading>
<button type="default" bindtap="loadingTap">点击弹出loading</button>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonDie WeChat-Applet-Entwicklung verwendet eine Ladekomponente, um die Ladeanimationsmethode anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage