本節(jié)學(xué)習(xí)目標(biāo)
- modal組件的四種用法
直接寫用法了,比較簡單
- 第一步導(dǎo)入模塊
var modal = weex.requireModule('modal')
- 1.提示toast
會在一個小浮層里展示關(guān)于某個操作的簡單反饋,效果如下
API
toast(options)
參數(shù)
options {Object}：相關(guān)選項
message {string}：展示的內(nèi)容
duration {number}：展示的持續(xù)時間（以秒為單位）
代碼如下
modal.toast({message:'toast提示',duration:1})
- 2.alert彈窗
API
alert(options, callback)
參數(shù)
options {Object}：alert選項
message {string}：警告框內(nèi)顯示的文字信息
okTitle {string}：確定按鈕上顯示的文字信息，默認是“OK”
callback {Function}：用戶操作完成后的回調(diào),注意這個回調(diào)是沒有參數(shù)的
代碼如下
modal.alert({
message:'你的密碼輸入有誤,請重新輸入',
okTitle:'是的,謝謝'
},res=>{
})
如果你使用默認的okTitle你可以這樣寫
modal.alert({message:'你的密碼輸入有誤'})
- 3.confirm
有確定或者取消按鈕的彈出,如下
API
confirm(options, callback)
參數(shù)
options {object}：confirm 選項
message {string}：確認框內(nèi)顯示的文字信息
okTitle {string}：確認按鈕上顯示的文字信息，默認是 OK
cancelTitle {string}：取消按鈕上顯示的文字信息，默認是 Cancel
callback {function (result)}：用戶操作完成后的回調(diào)，回調(diào)函數(shù)的參數(shù) result 是確定按鈕上的文字信息字符串
代碼如下
modal.confirm({
message:'你是美女嗎',
okTitle:"是的",
cancelTitle:'差一點點'
},res=>{
if(res=="是的"){
}else if (res=="差一點點"){
}
})
如果你使用系統(tǒng)默認的okTitle和cancelTtitle你可以這樣寫
modal.confirm({
message:'你是美女嗎'
},res=>{
if(res=="Ok"){
}else if (res=="Cancle"){
}
})
- 4.prompt輸入彈窗
帶有輸入框的彈窗
API
prompt(options, callback)
參數(shù)
options {object}：prompt 選項
message {string}：提示框內(nèi)要顯示的文字信息
okTitle {string}：確認按鈕上顯示的文字信息，默認是 OK
cancelTitle {string}：取消按鈕上顯示的文字信息，默認是 Cancel
callback {function (ret)}：用戶操作完成后的回調(diào)，回調(diào)函數(shù)的參數(shù) ret 格式形如 { result: 'OK', data: 'hello world' }，如下
result {string}：用戶按下的按鈕上的文字信息
data {string}：用戶輸入的文字信息
代碼如下
modal.prompt({
message:'請輸入你的昵稱',
okTitle:'確定',
cancelTitle:'取消'
},res=>{
if(res.result=='確定'){
}else if (res.result=='取消'){
}
})
如果你覺得這些界面顏色風(fēng)格和你的應(yīng)用配色格格不入,你可以自定義自己想要的類似的組件!
