?

做小程序也有幾個月了，今天來總結一下知識點和碰到的坑

小程序開發過程中，很多地方為了便利我們多采用小程序自帶彈出框來實現交互效果。這也夠大多數開發使用，下面我給大家詳細介紹下小程序彈出框
官方api傳送門：https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html?search-key=wx.show

?

wx.showToast()
title：顯示的提示信息，在沒有圖標的情況下，文本內容可顯示兩行
icon: 顯示的圖標
success：成功圖標
loading：加載圖標
none：沒有圖標
image：自定義顯示的圖標，優先級高于icon
duration：延遲的時間，彈出框彈出后的顯示時間
mask：true/false是否顯示遮罩層
success：接口調用成功的回調函數
fail：接口調用失敗的回調函數
complete：不管成功還是失敗都會執行的函數

?

wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})

?

wx.showToast接口只提供了兩種icon【success和loading】展示形式，但是在實際開發中并不滿足的。這里可以通過加image:'圖片路徑'

onLoad: function (options) {wx.showToast({title:"成功",icon: 'loading...',//圖標，支持"success"、"loading"?image: '/images/tan.png',//自定義圖標的本地路徑，image 的優先級高于 iconduration: 2000,//提示的延遲時間，單位毫秒，默認：1500?mask: false,//是否顯示透明蒙層，防止觸摸穿透，默認：false?success:function(){},fail:function(){},complete:function(){}})},

?

?

注：一般在點擊事件中調用，可結合使用wx.hideTotast來使用，如果icon值為none則不顯示圖標，此時 title 文本最多可顯示兩行

?

?

wx.showLoading()
title：加載的提示信息eg：玩命加載中...
mask：是否現思遮罩層
success：接口調用成功的回調函數
fail：接口調用失敗的回調函數
complete：無論成功還是失敗都會執行的函數
注：一般需要結合使用wx.hideLoading()；來使用可分別在onLoad和onReady中使用，數據渲染完成后關閉

?

?

wx.showModal()
title：提示信息的標題
content：提示信息的內容
showCancel：true/false是否顯示取消按鈕
cancelText：取消按鈕的文本內容，不得超過四個字符
cancelColor：取消按鈕的文本顏色，默認#000000
confirmText：確認按鈕的文本內容，不得超過四個字符
confirmColor：卻惹按鈕的文本顏色，默認#000000
success：接口成功的回調
fail：接口失敗的回調
complete：無論成功或失敗都會嗲用
注：一般帶年紀確認或取消，我們需要在success中進行事件的判斷處理

?

轉載于:https://www.cnblogs.com/banma/p/10517458.html

總結

以上是生活随笔為你收集整理的小程序开发之弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。