微信小程序四种弹窗方式实例-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序四种弹窗方式实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序四种弹窗方式实例

一、wx.showToast(Object object)

显示消息提示框

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

微信小程序弹窗,微信小程序,小程序

二、wx.showModal(Object object)

显示模态对话框

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

微信小程序弹窗,微信小程序,小程序

三、wx.showLoading(Object object)

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

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

|注意：

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

微信小程序弹窗,微信小程序,小程序