微信小程序显示loading的两种方法

最新推荐文章于 2025-06-27 15:19:27 发布

瑾珮

最新推荐文章于 2025-06-27 15:19:27 发布

阅读量4.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44870139/article/details/105865523

微信小程序专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在微信小程序中如何通过JS代码直接控制加载提示的显示与隐藏，以及如何在WXML中布局弹窗并利用条件渲染来实现加载提示的动态显示。提供了具体的代码示例，包括使用wx.showToast和wx.showLoading函数以及在WXML中利用{{showLoading}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在js代码中直接控制

showLoading:function(){
    wx.showToast({
        title:'加载中', //设置标题
        duration:2000, //设置显示时间
        mask:true,//是否打开遮罩,默认不打开
        icon:'none'	//图标样式，none为无图标
    });
},
cancelLoading:function(){
     wx.hideToast();
}

wx.showLoading({
    title:'加载中',
    mask:true,//此时遮罩层起作用
})

2、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
})