微信小程序四种弹窗方式

忘是亡心i 2024-04-07 11:19 86阅读 0赞

#### 微信小程序弹窗 ####

*  一、wx.showToast(Object object)
 *  二 、wx.showModal(Object object)
 *  三、wx.showLoading(Object object)
 *  四、wx.showActionSheet(Object object)
 *   *  五、官方文档

## 一、wx.showToast(Object object) ##

**显示消息提示框**

wx.showToast({
        
         title: '内容', //提示的内容
         duration: 2000, //持续的时间
         icon: 'loading', //图标有success、error、loading、none四种
         mask: true //显示透明蒙层 防止触摸穿透
      })

**示例**：  
![在这里插入图片描述][475e408e72744450a2a2ff8608b3eb3d.png]

## 二 、wx.showModal(Object object) ##

**显示模态对话框**

wx.showModal({
        
        title: '我是标题', //提示的标题
        content: '我是内容', //提示的内容
        success: function(res) {
        
          if(res.confirm) {
        
            console.log('用户点击了确定')
          } else if (res.cancel) {
        
            console.log('用户点击了取消')
          }
        }
      })

**示例**：  
![在这里插入图片描述][b49390cdca044b4e8f67ca3266de12ad.png]  
![在这里插入图片描述][9bd5a56233744795aa1e3f14b963fb72.png]

## 三、wx.showLoading(Object object) ##

**显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框**

wx.showLoading({
        
      title: '加载中',
    })
    
    setTimeout(function () {
        
      wx.hideLoading()
    }, 2000)

示例：  
![在这里插入图片描述][ad0839b06d614103ac9a500fd247e4c7.png]

> 注意：
> 
>  *  wx.showLoading 和 wx.showToast 同时只能显示一个
>  *  wx.showLoading 应与 wx.hideLoading 配对使用

## 四、wx.showActionSheet(Object object) ##

**显示操作菜单**

wx.showActionSheet({
        
       itemList:['选项一','选项二','其它'], //文字数组
       success: (res) => {
        
         switch(res.tapIndex) {
        
           case 0:
             console.log('点击了 选项一')
             break;
           case 1:
             console.log('点击了 选项二')
             break;	
           case 2:
             console.log('点击了 其它选项')
             break;
         }
       },
       fail (res) {
        
         console.log('取消选项')
       }
     })

示例：  
![在这里插入图片描述][674215da3d3a4ed1ba3460c29537c493.png]  
![在这里插入图片描述][90145e6b8c0b464c8910c1582658a504.png]

### 五、官方文档 ###

具体参数可见官网：[微信小程序弹窗][Link 1]

[475e408e72744450a2a2ff8608b3eb3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4877d3222e9f459e91ca262d9dc3962d.png
[b49390cdca044b4e8f67ca3266de12ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5396b622f0454d60a4bd933c0d8eb113.png
[9bd5a56233744795aa1e3f14b963fb72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/cd069f91cc5349328fdaab2fe31abbe4.png
[ad0839b06d614103ac9a500fd247e4c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d858381f91b14f788c7ffbe163bea8f7.png
[674215da3d3a4ed1ba3460c29537c493.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bf0e8149eb1d48ce92f8ea0a501fec1f.png
[90145e6b8c0b464c8910c1582658a504.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bf421f1cbf5e4923b3f22d5c628e617a.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html