小程序開發過程中，很多地方為了便利我們多采用小程序自帶彈出框來實現交互效果。這也夠大多數開發使用，下面我給大家詳細介紹下小程序彈出框
-
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是否禁用
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
當前選擇：{{array[index]}}
</view>
</picker>
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：取消選擇或點擊遮罩層時觸發
<view class="section">
<view class="section__title">多列選擇器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
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是否禁用
<view class="section">
<view class="section__title">時間選擇器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange" bindcancel="cancel">
<view class="picker">
當前選擇: {{time}}
</view>
</picker>
</view>
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是否禁用
<view class="section">
<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
當前選擇: {{date}}
</view>
</picker>
</view>
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是否禁用
<view class="section">
<view class="section__title">省市區選擇器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
Page({
/**
*time：選擇的時間
*/
data: {
region: ['廣東省', '廣州市', '海珠區'],
customItem: "全部"
}，
bindRegionChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
})