Four pop-up methods for WeChat Mini Programs

一、wx.showToast(Object object)

Show message box

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

Example :
insert image description here

二 、wx.showModal(Object object)

Show a modal dialog

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

Example :
insert image description here
insert image description here

三、wx.showLoading(Object object)

Display the loading prompt box. You need to actively call wx.hideLoading to close the prompt box

wx.showLoading({
    
    
  title: '加载中',
})

setTimeout(function () {
    
    
  wx.hideLoading()
}, 2000)

Example:
insert image description here

Notice:

  • wx.showLoading and wx.showToast can only display one at the same time
  • wx.showLoading should be paired with wx.hideLoading

四、wx.showActionSheet(Object object)

show action menu

 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('取消选项')
   }
 })

Example:
insert image description here
insert image description here

5. Official documents

Specific parameters can be found on the official website: WeChat applet pop-up window

Guess you like

Origin blog.csdn.net/weixin_43825761/article/details/126618068