微信小程序弹出loading层的两种方法：直接在代码里控制，在wxml文件里布局弹窗loading层，利用条件渲染，在js代码里控制是否显示loading层。

末蓝、 2022-07-12 12:39 206阅读 0赞

[微信小程序][Link 1]弹出loading层的两种方法：直接在代码里控制，在wxml文件里布局弹窗loading层，利用条件渲染，在[js代码][js]里控制是否显示loading层。

##  直接在代码里控制 ##

文档地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html?t=20161107\#wxshowtoastobject][https_mp.weixin.qq.com_debug_wxadoc_dev_api_api-react.html_t_20161107_wxshowtoastobject]

js代码

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

##  在wxml文件里布局弹窗，利用条件渲染，在js代码里控制是否显示 ##

文档地址:[https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=20161107][https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxml_list.html_t_20161107]

wxml代码

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

[Link 1]: http://www.51xuediannao.com/xiaochengxu/
[js]: http://www.51xuediannao.com/js/
[https_mp.weixin.qq.com_debug_wxadoc_dev_api_api-react.html_t_20161107_wxshowtoastobject]: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html?t=20161107#wxshowtoastobject
[https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxml_list.html_t_20161107]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=20161107