微信小程序弹窗

wxml

<view class="content">
    <button bindtap="popSuccessTest">成功提示弹窗</button>
    <button bindtap="popMaskTest">带透明蒙层的弹窗</button>
    <button bindtap="popTest">纯文字弹窗</button>
    <button bindtap="popCustomIcon">自定义图标</button>
    <button bindtap="popConfirm">confirm的弹窗</button>
    <button bindtap="popLoading">加载弹窗</button>
    <button bindtap="popSelect">选择框弹窗</button>
</view>

js

Page({
  popSuccessTest: function () {
    wx.showToast({
      title: \'成功提示弹窗\',
      icon: \'\',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示success
      duration: 2000,      //停留时间
    })
  },
  popMaskTest: function () {
    wx.showToast({
      title: \'带蒙层的弹窗\',     
      duration: 2000,    
      mask:true    //是否有透明蒙层，默认为false 
                   //如果有透明蒙层，弹窗的期间不能点击文档内容 
    })
  },
  popTest: function(){
    wx.showToast({
      title: \'纯文字弹窗\',
      icon: \'none\',    //如果要纯文本，不要icon，将值设为\'none\'
      duration: 2000     
    })  
  },
  popCustomIcon: function () {
    wx.showToast({
      title: \'自定义图标弹窗\',
      image: \'../image/11.jpg\',  //image的优先级会高于icon
      duration: 2000     
    })
  },
  popConfirm: function(){
    wx.showModal({
      title: \'confirm的弹窗\',
      content: \'确认要删除该项吗？\',
      success: function (res) {
        if (res.confirm) {  
          console.log(\'点击确认回调\')
        } else {   
          console.log(\'点击取消回调\')
        }
      }
    })
  },
  popLoading: function(){
    wx.showLoading({
      title:\'加载中...\'
    });
  },
  popSelect: function(){
    wx.showActionSheet({
      itemList: [\'1\', \'2\', \'3\'],
      success: function (res) {
        console.log(res);
      }
    })
  }
});

注意

wx.showToast中比较重要的属性

title: \'弹窗文字内容\',

icon: 弹窗图标默认值是success，当没有这个属性时，或者当值为\'\'，或者为其他值时(设置了error,warning都无效)都最终为success。如果要纯文本，不要icon，将值设为\'none\'

image: 自定义图标,image的优先级会高于icon

duration: 弹窗停留时间,

mask: 是否有透明蒙层，默认为false ，如果有透明蒙层，弹窗的期间不能点击弹窗后面的文档内容

wx.showLoading注意点

使用wx.showLoading触发的弹窗，需要用wx.hideLoading()来关闭.