1. 程式人生 > >微信小程式彈出loading層的兩種方法:直接在程式碼裡控制,在wxml檔案里布局彈窗loading層,利用條件渲染,在js程式碼裡控制是否顯示loading層。

微信小程式彈出loading層的兩種方法:直接在程式碼裡控制,在wxml檔案里布局彈窗loading層,利用條件渲染,在js程式碼裡控制是否顯示loading層。

微信小程式彈出loading層的兩種方法:直接在程式碼裡控制,在wxml檔案里布局彈窗loading層,利用條件渲染,在js程式碼裡控制是否顯示loading層。

 直接在程式碼裡控制

js程式碼

showLoading:function(){
        wx.showToast({
         title: '載入中',
         icon: 'loading'
        });
     },
cancelLoading:function(){
        wx.hideToast();
     }

 在wxml檔案里布局彈窗,利用條件渲染,在js程式碼裡控制是否顯示

wxml程式碼

<view >
    <loading wx:if="{{showLoading}}">載入中</loading>
</view>

js

data: {
      showLoading:true
},
showLoading:function(){
     this.setData({
        showLoading:true
     })
  },
cancelLoading:function(){
    this.setData({
        showLoading:false
})