小程序确定取消弹窗_小程序开发之弹出框
小程序開發(fā)過程中，很多地方為了便利我們多采用小程序自帶彈出框來實現(xiàn)交互效果。這也夠大多數(shù)開發(fā)使用，下面我給大家詳細介紹下小程序彈出框
wx.showToast()
title：顯示的提示信息，在沒有圖標的情況下，文本內(nèi)容可顯示兩行
icon:? 顯示的圖標
success：成功圖標
loading：加載圖標
none：沒有圖標
image：自定義顯示的圖標，優(yōu)先級高于icon
duration：延遲的時間，彈出框彈出后的顯示時間
mask：true/false是否顯示遮罩層
success：接口調(diào)用成功的回調(diào)函數(shù)
fail：接口調(diào)用失敗的回調(diào)函數(shù)
complete：不管成功還是失敗都會執(zhí)行的函數(shù)
注：一般在點擊事件中調(diào)用，可結(jié)合使用wx.hideTotast來使用，
wx.showLoading()
title：加載的提示信息eg：玩命加載中...
mask：是否現(xiàn)思遮罩層
success：接口調(diào)用成功的回調(diào)函數(shù)
fail：接口調(diào)用失敗的回調(diào)函數(shù)
complete：無論成功還是失敗都會執(zhí)行的函數(shù)
注：一般需要結(jié)合使用wx.hideLoading()；來使用可分別在onLoad和onReady中使用，數(shù)據(jù)渲染完成后關(guān)閉
wx.showModal()
title：提示信息的標題
content：提示信息的內(nèi)容
showCancel：true/false是否顯示取消按鈕
cancelText：取消按鈕的文本內(nèi)容，不得超過四個字符
cancelColor：取消按鈕的文本顏色，默認#000000
confirmText：確認按鈕的文本內(nèi)容，不得超過四個字符
confirmColor：卻惹按鈕的文本顏色，默認#000000
success：接口成功的回調(diào)
fail：接口失敗的回調(diào)
complete：無論成功或失敗都會嗲用
注：一般帶年紀確認或取消，我們需要在success中進行事件的判斷處理
wx.showModal({
title: '提示',
content: '這是一個模態(tài)彈窗',
success: function(res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})
wx.showActionSheet()
itemList: 底部彈出的信息元素為數(shù)組。
success：成功的回調(diào)
fail：失敗的回調(diào)
wx.showActionSheet({
itemList: ['A', 'B', 'C'],
success: function(res) {
console.log(res.tapIndex)
},
fail: function(res) {
console.log(res.errMsg)
}
})
注：bug是當數(shù)組中的元素較多時，彈出框的高度會很高，且不能上下滑動，因此，大家可以看我總結(jié)的小程序開發(fā)之組件的簡單使用，這篇中我有總結(jié)彈出框組件的封裝。
這里的話需要用到小程序自帶的picker組件，picker一共分為三類
普通選擇器：mode = selector
range：下拉列表的數(shù)據(jù)，為一個obj或array。只有當mode=selector或者?mode= multiSelector時有效。
range-key：當range為對象時，range-key用來指定顯示對象的哪一個屬性上的屬性值
value：下拉項的下標，可通過改變該屬性來實現(xiàn)確定后數(shù)據(jù)的對應(yīng)渲染。
bindchange：value改變時觸發(fā)
bindcancel：取消或者點擊遮罩層的時候觸發(fā)
disabled：true/false是否禁用
當前選擇：{{array[index]}}
Page({
/**
*array：普通選擇器下拉的數(shù)據(jù)
*index：默認顯示的時下標為0的數(shù)據(jù)
*/
data: {
array: ['美國', '中國', '巴西', '日本'],
index: 0,
}，
bindPickerChange: function (e) {
console.log('picker下拉項發(fā)生變化后，下標為：', e.detail.value)
this.setData({
index: e.detail.value
})
},
})
多列選擇器：mode = multiSelector
range：下拉列表的數(shù)據(jù)，通過二位三位數(shù)組來表示對應(yīng)列的數(shù)據(jù)。只有當mode=selector或者?mode= multiSelector時有效。
range-key： 當 range是一個 二維Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
value：是一個數(shù)組，依次對應(yīng)每一列的下標。從0開始
bindchange：點擊確定后觸發(fā)的事件，返回當前的所有列的行元素所在的下標
bindcolumnchange：value改變時觸發(fā)，返回的值為第幾列第幾行下標發(fā)生變化。
bindcancel：取消選擇或點擊遮罩層時觸發(fā)
多列選擇器
當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
Page({
/**
*multiArray：多列選擇的二位數(shù)組
*multiIndex：默認顯示的每列的下標
*/
data: {
multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'], ['豬肉絳蟲', '吸血蟲']],
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] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
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：點擊確定的時候觸發(fā)，返回value值，返回的是選中的時間，
bindcancel：點擊取消時或點擊遮罩層時觸發(fā)
disabled：true/false是否禁用
時間選擇器
當前選擇: {{time}}
Page({
/**
*time：選擇的時間
*/
data: {
time: '12:01',
}，
bindTimeChange: function (e) {
// console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
console.error(e);
this.setData({
time: e.detail.value
})
},
})
日期選擇器：mode = data
value： 表示選中的日期，格式為"YYYY-MM-DD"
start： 表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"
end： 表示有效日期范圍的結(jié)束，字符串格式為"YYYY-MM-DD"
fields：參數(shù)(year，month，day)表示日期的粒度，為year時，下拉下標只顯示年份選擇，為month時會顯示year，month，為day時會顯示year，month，day
bindchange：點擊確定的時候觸發(fā)，返回的值為選擇的時間
bindcancel：點擊取消時或點擊遮罩層時觸發(fā)
disabled：true/false是否禁用
日期選擇器
當前選擇: {{date}}
Page({
/**
*data：選擇的日期
*/
data: {
date: '2016-09-01',
}，
bindDateChange: function (e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
date: e.detail.value
})
},
})
省市區(qū)選擇器：mode = region
value：? 表示選中的省市區(qū)，默認選中每一列的第一個值
custom-item： 可為每一列的頂部添加一個自定義的項
start： 表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"
end： 表示有效日期范圍的結(jié)束，字符串格式為"YYYY-MM-DD"
fields：參數(shù)(year，month，day)表示日期的粒度，為year時，下拉下標只顯示年份選擇，為month時會顯示year，month，為day時會顯示year，month，day
bindchange：點擊確定的時候觸發(fā)， value 改變時觸發(fā) change 事件，event.detail = {value: value, code: code, postcode: postcode}，其中字段code是統(tǒng)計用區(qū)劃代碼，postcode是郵政編碼
bindcancel：點擊取消時或點擊遮罩層時觸發(fā)
disabled：true/false是否禁用
省市區(qū)選擇器
當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
Page({
/**
*time：選擇的時間
*/
data: {
region: ['廣東省', '廣州市', '海珠區(qū)'],
customItem: "全部"
}，
bindRegionChange: function (e) {
console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
總結(jié)
以上是生活随笔為你收集整理的小程序确定取消弹窗_小程序开发之弹出框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： github哪些协议能商用_GitHub
- 下一篇： linux怎么才能算telnet成功_怎