小程序開發過程中，很多地方為了便利我們多采用小程序自帶彈出框來實現交互效果。這也夠大多數開發使用，下面我給大家詳細介紹下小程序彈出框

wx.showToast()

title：顯示的提示信息，在沒有圖標的情況下，文本內容可顯示兩行

icon:? 顯示的圖標

success：成功圖標

loading：加載圖標

none：沒有圖標

image：自定義顯示的圖標，優先級高于icon

duration：延遲的時間，彈出框彈出后的顯示時間

mask：true/false是否顯示遮罩層

success：接口調用成功的回調函數

fail：接口調用失敗的回調函數

complete：不管成功還是失敗都會執行的函數

注：一般在點擊事件中調用，可結合使用wx.hideTotast來使用，

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中進行事件的判斷處理

wx.showModal({

title: '提示',

content: '這是一個模態彈窗',

success: function(res) {

if (res.confirm) {

console.log('用戶點擊確定')

} else if (res.cancel) {

console.log('用戶點擊取消')

}

}

})

wx.showActionSheet()

itemList: 底部彈出的信息元素為數組。

success：成功的回調

fail：失敗的回調

wx.showActionSheet({

itemList: ['A', 'B', 'C'],

success: function(res) {

console.log(res.tapIndex)

},

fail: function(res) {

console.log(res.errMsg)

}

})

注：bug是當數組中的元素較多時，彈出框的高度會很高，且不能上下滑動，因此，大家可以看我總結的小程序開發之組件的簡單使用，這篇中我有總結彈出框組件的封裝。

這里的話需要用到小程序自帶的picker組件，picker一共分為三類

普通選擇器：mode = selector

range：下拉列表的數據，為一個obj或array。只有當mode=selector或者?mode= multiSelector時有效。

range-key：當range為對象時，range-key用來指定顯示對象的哪一個屬性上的屬性值

value：下拉項的下標，可通過改變該屬性來實現確定后數據的對應渲染。

bindchange：value改變時觸發

bindcancel：取消或者點擊遮罩層的時候觸發

disabled：true/false是否禁用

當前選擇：{{array[index]}}

Page({

/**

*array：普通選擇器下拉的數據

*index：默認顯示的時下標為0的數據

*/

data: {

array: ['美國', '中國', '巴西', '日本'],

index: 0,

}，

bindPickerChange: function (e) {

console.log('picker下拉項發生變化后，下標為：', e.detail.value)

this.setData({

index: e.detail.value

})

},

})

多列選擇器：mode = multiSelector

range：下拉列表的數據，通過二位三位數組來表示對應列的數據。只有當mode=selector或者?mode= multiSelector時有效。

range-key： 當 range是一個 二維Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容

value：是一個數組，依次對應每一列的下標。從0開始

bindchange：點擊確定后觸發的事件，返回當前的所有列的行元素所在的下標

bindcolumnchange：value改變時觸發，返回的值為第幾列第幾行下標發生變化。

bindcancel：取消選擇或點擊遮罩層時觸發

多列選擇器

當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}

Page({

/**

*multiArray：多列選擇的二位數組

*multiIndex：默認顯示的每列的下標

*/

data: {

multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絳蟲', '吸血蟲']],

multiIndex: [0, 0, 0],

}，

bindMultiPickerChange: function (e) {

this.setData({

multiIndex: e.detail.value

})

},

bindMultiPickerColumnChange: function (e) {

console.log(e);

var data = {

multiArray: this.data.multiArray,

multiIndex: this.data.multiIndex

};

data.multiIndex[e.detail.column] = e.detail.value;

switch (e.detail.column) {

case 0:

switch (data.multiIndex[0]) {

case 0:

data.multiArray[1] = ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'];

data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];

break;

case 1:

data.multiArray[1] = ['魚', '兩棲動物', '爬行動物'];

data.multiArray[2] = ['鯽魚', '帶魚'];

break;

}

data.multiIndex[1] = 0;

data.multiIndex[2] = 0;

break;

case 1:

switch (data.multiIndex[0]) {

case 0:

switch (data.multiIndex[1]) {

case 0:

data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];

break;

case 1:

data.multiArray[2] = ['蛔蟲'];

break;

case 2:

data.multiArray[2] = ['螞蟻', '螞蟥'];

break;

case 3:

data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓'];

break;

case 4:

data.multiArray[2] = ['昆蟲', '甲殼動物', '蛛形動物', '多足動物'];

break;

}

break;

case 1:

switch (data.multiIndex[1]) {

case 0:

data.multiArray[2] = ['鯽魚', '帶魚'];

break;

case 1:

data.multiArray[2] = ['青蛙', '娃娃魚'];

break;

case 2:

data.multiArray[2] = ['蜥蜴', '龜', '壁虎'];

break;

}

break;

}

data.multiIndex[2] = 0;

// console.log(data.multiIndex);

break;

}

this.setData(data);

},

})

時間選擇器：mode = time

value：表示選中的時間，時間格式為 hh:mm

start：表示時間的開始點，格式為hh:mm

end：表示時間的街書店，格式為hh:mm

bindchange：點擊確定的時候觸發，返回value值，返回的是選中的時間，

bindcancel：點擊取消時或點擊遮罩層時觸發

disabled：true/false是否禁用

時間選擇器

當前選擇: {{time}}

Page({

/**

*time：選擇的時間

*/

data: {

time: '12:01',

}，

bindTimeChange: function (e) {

// console.log('picker發送選擇改變，攜帶值為', e.detail.value)

console.error(e);

this.setData({

time: e.detail.value

})

},

})

日期選擇器：mode = data

value： 表示選中的日期，格式為"YYYY-MM-DD"

start： 表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"

end： 表示有效日期范圍的結束，字符串格式為"YYYY-MM-DD"

fields：參數(year，month，day)表示日期的粒度，為year時，下拉下標只顯示年份選擇，為month時會顯示year，month，為day時會顯示year，month，day

bindchange：點擊確定的時候觸發，返回的值為選擇的時間

bindcancel：點擊取消時或點擊遮罩層時觸發

disabled：true/false是否禁用

日期選擇器

當前選擇: {{date}}

Page({

/**

*data：選擇的日期

*/

data: {

date: '2016-09-01',

}，

bindDateChange: function (e) {

console.log('picker發送選擇改變，攜帶值為', e.detail.value)

this.setData({

date: e.detail.value

})

},

})

省市區選擇器：mode = region

value：? 表示選中的省市區，默認選中每一列的第一個值

custom-item： 可為每一列的頂部添加一個自定義的項

start： 表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"

end： 表示有效日期范圍的結束，字符串格式為"YYYY-MM-DD"

fields：參數(year，month，day)表示日期的粒度，為year時，下拉下標只顯示年份選擇，為month時會顯示year，month，為day時會顯示year，month，day

bindchange：點擊確定的時候觸發， value 改變時觸發 change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是統計用區劃代碼，postcode是郵政編碼

bindcancel：點擊取消時或點擊遮罩層時觸發

disabled：true/false是否禁用

省市區選擇器

當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}

Page({

/**

*time：選擇的時間

*/

data: {

region: ['廣東省', '廣州市', '海珠區'],

customItem: "全部"

}，

bindRegionChange: function (e) {

console.log('picker發送選擇改變，攜帶值為', e.detail.value)

this.setData({

region: e.detail.value

})

}

})

總結

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

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