微信小程序loading全操作

微信小程序的loading有三两种形式的显示:
1.组件形式 : <loading>
2.动态形式 :showTaost,showLoading
案例代码:
loading.wxml

<view class="container">
<view class="item">
<!-- 组件loading -->
<button bindtap="show" type="primary">控制loading组件</button>
    <loading hidden="{{isShow}}">加载中...</loading>
</view>
<view class="item">
<!-- 动态loading showTaost -->
<button bindtap="toast" type="primary">控制动态toast组件</button>
    <loading hidden="{{isShow}}">加载中...</loading>
</view>
<view class="item">
<!-- 动态loading showLoading -->
<button bindtap="showloading" type="primary">控制动态loading组件</button>
    <loading hidden="{{isShow}}">加载中...</loading>
</view>
</view>

loading.wxss

/* pages/loading/loading.wxss */
.item{
    width: 90%;
    padding: 10rpx;
    background-color: white;
    border-radius: 18rpx;
    text-align: center;
    font-weight: bold;
    margin: 10rpx 0;
}

loading.js

// pages/loading/loading.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isShow:true
    },
    showloading(){
        wx.showLoading({
            title:'加载中',
            mask:true,
            success(res){
                console.log(res);
            }
        })
        // 两秒之后关闭loading
        setTimeout(()=>{
            wx.hideLoading({
              success: (res) => {},
            })
        },2000)
    },
    toast(){
        wx.showToast({
            title:'加载中...',
            icon:'loading',
            // duration:3000,//这里如果不设置的话，可以用wx.hideToast来隐藏
            mask:true,
            success(res){
                console.log(res,'showsuccess');
            }
        })
        // 2秒之后关闭toast
        setTimeout(this.closeToast,2000)
    },
    // 关闭toast
    closeToast(){
        wx.hideToast({
            success(){
                console.log('success close');
            }
        })
    },
    // 控制loading组件
    show(){
        var that=this
        this.setData({
            isShow:!that.data.isShow
        })
        // 这里可以是一个网络请求，等请求成功之后关闭loading，我用定时器模拟
        setTimeout(()=>{
            this.setData({
                isShow:true 
            })
        },2000)
    },
})

实现的效果如下:

loading.png

第一个按钮这里采用loading组件实现的，在实际开发中我们在发起一个网络请求的时候开启一个loading，等获取到数据以后再把loading关闭即可