微信小程序api视频课程-界面-交互-wx.showLoading + wx.hideLoading 加载提示框的使用

Myth丶恋晨 2024-02-19 19:19 10阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

### wxml代码 ###

<view>
    wx.showLoading(Object object)显示 loading 提示框。
    需主动调用 wx.hideLoading 才能关闭提示框
    </view>
    <button bindtap="ts01">显示 Loading 加载框</button>
    
    
    <view>
    wx.hideLoading(Object object)隐藏 loading 提示框
    </view>
    <button bindtap='ys01'>隐藏 Loading 加载框</button>

### js代码 ###

/**
       * 页面的初始数据
       */
      data: {
    
      },
      ts01:function(){
        wx.showLoading({
          title: '加载中...',
        })
      },
      ys01:function(){
        wx.hideLoading()
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        wx.showLoading({
          title: 'loading....',
        })
        setTimeout(
          function(){
            wx.hideLoading()
          },2000
        )
    
      },

[欢迎大家收看我的视频教程：微信小程序常用API使用][API]

![界面-交互-wx.showLoading + wx.hideLoading][-_-wx.showLoading _ wx.hideLoading]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5c65d3e98f2f4507a45a1e330b155782.png
[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[API]: https://ke.qq.com/course/383235?tuin=2b10d56
[-_-wx.showLoading _ wx.hideLoading]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/615f7204618741659fcb51e8fc846689.png