小程序常用交互彈層

一、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   接口調用結束的回調函數(調用成功、失敗都會執行)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章