weex-24-modal模块

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=='取消'){

        }
    })

如果你觉得这些界面颜色风格和你的应用配色格格不入,你可以自定义自己想要的类似的组件!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

在 Python 程序中显示进度条

转自 http://my.oschina.net/jhao104/blog/681507 1、利用标准输出 先说一下文本系统的控制符: \r: 将光标移...

3247
来自专栏Android干货

小程序实践(三):九宫格实现及item跳转

1673
来自专栏游戏杂谈

构建第一个Flex的Mobile APP

Flash Builder 4.5已经支持直接创建Flex Mobile Project,写一个最简单的例子

932
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4076
来自专栏挖坑填坑

Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用

1342
来自专栏一“技”之长

标签之美三——超链接的嵌入 原

通常的超链接有两种方式,一种是链接到另一个文件,另一种是链接到当前文件的某个位置。这两种方式都是通过<a></a>标签来创建,其中href属性用来指定链接的目标...

942
来自专栏iOS开发攻城狮的集散地

更改网页的标签

1594
来自专栏知无涯

移动端前端开发调试-将safari设置iPhone模拟器

85111
来自专栏代码GG之家

Scoops android app多主题架构(二)

简要说明 通过注释方式,完成多主题的效果更换。可以减少一些代码,使得代码更清晰一些。 ? 使用说明 1 首先写一个注释类 ? 2 在MainApp 初始化的时候...

2038
来自专栏smy

prompt() 方法,弹框带输入框

prompt()  有alert的风格,却带着输入框,这是怎么实现的呢? 语法 prompt(text,defaultText) 参数 描述 t...

4075

扫码关注云+社区

领取腾讯云代金券