小程序常用交互弹层

一、wx.showToast

wx.showToast({
         title: '失败',//提示文字
         duration:2000,//显示时长
         mask:true,//是否显示透明蒙层，防止触摸穿透，默认：false  
         icon:'success', //图标，支持"success"、"loading"  
         success:function(){ },//接口调用成功
         fail: function () { },  //接口调用失败的回调函数  
         complete: function () { } //接口调用结束的回调函数  
      })

二、wx.showModal

wx.showModal({
         title: '删除图片',
         content: '确定要删除该图片？',
         showCancel: true,//是否显示取消按钮
         cancelText:"否",//默认是“取消”
         cancelColor:'skyblue',//取消文字的颜色
         confirmText:"是",//默认是“确定”
         confirmColor: 'skyblue',//确定文字的颜色
         success: function (res) {
            if (res.cancel) {
               //点击取消,默认隐藏弹框
            } else {
               //点击确定
               temp.splice(index, 1),
               that.setData({
                  tempFilePaths: temp,
               })
            }
         },
         fail: function (res) { },//接口调用失败的回调函数
         complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行）
      })

 

三、wx.showActionSheet

 wx.showActionSheet({
      itemList: ['回复','转发','打印'],
      success(res) {
          switch(res.tapIndex){
              case 0:
              wx.showToast({ title: '回复成功！' });
              break;
              case 1:
              wx.showToast({ title: '转发成功！' });
              break;
              case 2:
              wx.showToast({ title: '打印成功！' });
              break;
          }
      }
    })
 

 

四、wx.showLoading

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

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

 

属性	类型	默认值	必填	说明
title	string		是	提示的内容
mask	boolean	false	否	是否显示透明蒙层，防止触摸穿透
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）