Paste_Image.png
本节学习目标
- modal组件的四种用法
直接写用法了,比较简单
- 第一步导入模块
var modal = weex.requireModule('modal')
- 1.提示toast
会在一个小浮层里展示关于某个操作的简单反馈,效果如下
F6013360-9818-4644-A31B-8902647C7385.png
API
toast(options)
参数
options {Object}：相关选项
message {string}：展示的内容
duration {number}：展示的持续时间（以秒为单位）
代码如下
modal.toast({message:'toast提示',duration:1})
- 2.alert弹窗
87CF7C90-708C-41D4-8B87-972E701F3B0F.png
API
alert(options, callback)
参数
options {Object}：alert选项
message {string}：警告框内显示的文字信息
okTitle {string}：确定按钮上显示的文字信息，默认是“OK”
callback {Function}：用户操作完成后的回调,注意这个回调是没有参数的
代码如下
modal.alert({
message:'你的密码输入有误,请重新输入',
okTitle:'是的,谢谢'
},res=>{
})
如果你使用默认的okTitle你可以这样写
modal.alert({message:'你的密码输入有误'})
- 3.confirm
有确定或者取消按钮的弹出,如下
Paste_Image.png
API
confirm(options, callback)
参数
options {object}：confirm 选项
message {string}：确认框内显示的文字信息
okTitle {string}：确认按钮上显示的文字信息，默认是 OK
cancelTitle {string}：取消按钮上显示的文字信息，默认是 Cancel
callback {function (result)}：用户操作完成后的回调，回调函数的参数 result 是确定按钮上的文字信息字符串
代码如下
modal.confirm({
message:'你是美女吗',
okTitle:"是的",
cancelTitle:'差一点点'
},res=>{
if(res=="是的"){
}else if (res=="差一点点"){
}
})
如果你使用系统默认的okTitle和cancelTtitle你可以这样写
modal.confirm({
message:'你是美女吗'
},res=>{
if(res=="Ok"){
}else if (res=="Cancle"){
}
})
- 4.prompt输入弹窗
带有输入框的弹窗
Paste_Image.png
API
prompt(options, callback)
参数
options {object}：prompt 选项
message {string}：提示框内要显示的文字信息
okTitle {string}：确认按钮上显示的文字信息，默认是 OK
cancelTitle {string}：取消按钮上显示的文字信息，默认是 Cancel
callback {function (ret)}：用户操作完成后的回调，回调函数的参数 ret 格式形如 { result: 'OK', data: 'hello world' }，如下
result {string}：用户按下的按钮上的文字信息
data {string}：用户输入的文字信息
代码如下
modal.prompt({
message:'请输入你的昵称',
okTitle:'确定',
cancelTitle:'取消'
},res=>{
if(res.result=='确定'){
}else if (res.result=='取消'){
}
})
如果你觉得这些界面颜色风格和你的应用配色格格不入,你可以自定义自己想要的类似的组件!
网友评论