UIActionDialog

来自于：AC模块工作室立即使用

datePicker goPay pay payBy payFor show hide close

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

概述

UIActionDialog 此模块封装了可以从屏幕底部向上弹出（300毫秒动画）的 action 选择器（datePicker 打开的是3D滚轮效果）。开发者可自定义选择器的样式，也支持自定义是否显示遮罩层及其样式，可监听用户点击事件。 并在监听的事件里自行设置显示/隐藏（show/hide）等模块的相关操作，使模块试用更加灵活，多样。

datePicker接口实现的选择器截图：

datePicker

payFor接口实现的选择器截图：

payFor

payBy接口实现的选择器截图：

payBy

pay接口实现的选择器截图：

pay

goPay接口实现的选择器截图：

goPay

模块接口

datePicker

打开日期选择器

注意：点击本接口弹出的选择器的左右按钮、遮罩层均不会关闭弹框，需要在回调事件里自行调用 close（或 hide）接口关闭。

datePicker({params}, callback(ret))

params

styles：

  • 类型：JSON对象
  • 描述：（可选项）模块各部分的样式配置
  • 内部字段：
  1. {
  2.    navigator: {             //（可选项）JSON对象；导航条配置
  3.       h: 44,                //（可选性）数字类型；导航条高度；默认：44
  4.       bg:'#F8F8FF',         //（可选项）字符串类型；导航条背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  5.       titleSize:13,        //（可选性）数字类型；标题文本字体大小；默认：13
  6.       titleColor:'#000000',//（可选项)字符串类型；标题文本颜色，支持rgb、rgba、#；默认：#000000
  7.       title:'' ,           //（可选项)字符串类型；标题文本；默认：空（不显示） 
  8.        divider: '#696969', // (可选项)字符串类型；导航条下分隔线的颜色，支持rgb、rgba、#；默认：#696969 
  9.        dividerSize: 0.3    // (可选项)数字类型；导航条下分隔线的粗细；默认：0.3
  10.    }, 
  11.    leftBtn: {              //（可选项）JSON对象；导航条左边按钮配置，不传则不显示
  12.       w: 50,               //（可选项）数字类型；按钮宽度；默认：50
  13.       h: 34,               //（可选项）数字类型；按钮高度；默认：34
  14.       marginL:10,          //（可选项）数字类型；按钮左边距；默认：10
  15.       bg:'#F8F8FF',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  16.       titleSize:13,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  17.       titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  18.       title:''             //（可选项)字符串类型；按钮标题文本；默认：取消 
  19.    }, 
  20.    rightBtn: {             //（可选项）JSON对象；导航条右边按钮配置，不传则不显示
  21.       w: 50,               //（可选项）数字类型；按钮宽度；默认：50
  22.       h: 34,               //（可选项）数字类型；按钮高度；默认：34
  23.       marginR:10,          //（可选项）数字类型；按钮右边距；默认：10
  24.       bg:'#F8F8FF',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  25.       titleSize:12,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  26.       titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  27.       title:''             //（可选项)字符串类型；按钮标题文本；默认：确定 
  28.    },  
  29.    content: {              //（可选项）JSON对象；选择器区域样式配置 
  30.       h: 220,                //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：220
  31.       bg:'#F5F5F5',        //（可选项）字符串类型；选择器背景，支持rgb、rgba()、#、img；默认：#F5F5F5
  32.       size:16,             //（可选性）数字类型；滚轮显示文字大小；默认：16
  33.       active:'#ff0000',    //（可选项)字符串类型；滑到选中位置后的文本颜色，支持rgb、rgba、#；默认：#ff0000 
  34.       inactive:'#00000',  //（可选项)字符串类型；滑到非选中位置后的文本颜色，支持rgb、rgba、#；默认：#00000 
  35.        divider: '#ff0000', // (可选项)字符串类型；选中项上下分隔线的颜色，支持rgb、rgba、#，不传不显示；默认：不显示
  36.        dividerSize: 0.3,   // (可选项)数字类型；选中项上下分隔线的粗细；默认：0.5
  37.        row:5,              //（可选项）数字类型；显示几行；默认：5
  38.        fromYears:1919,     //（可选项）数字类型；开始年份；默认：当前年份之前100年
  39.        toYears:2119        //（可选项）数字类型；终止年份；默认：当前年份之后100年
  40.    }
  41. }

mask:

  • 类型：字符串
  • 描述：（可选项）上部遮罩层配置，支持rgb、rgba、#；
  • 默认：不显示遮罩层

selected:

  • 类型：字符串
  • 描述：默认当前选中日期，如：2019-5-28
  • 默认：当前日期

animation:

  • 类型：布尔
  • 描述：（可选项）打开/关闭（显示/隐藏）时是否带动画效果（300毫秒）
  • 默认：true

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：回调参数
  • 内部字段：
  1. {   
  2.       eventType:'left',  //字符串类型；交互事件类型；取值范围：
  3.                           //show:打开并显示事件
  4.                           //left:点击左按钮事件
  5.                           //right:点击右按钮事件
  6.                           //mask:点击遮罩层事件
  7.                           //select:  选中项改变事件
  8.       selected: ''        //字符串类型；选中日期，如：2019-5-28
  9. }

示例代码

  1. var actionDialog = api.require('UIActionDialog');
  2. actionDialog.datePicker({
  3.     styles:{
  4.         navigator:{
  5.             divider:'#696969',
  6.             dividerSize:0.3
  7.         },
  8.         leftBtn:{
  9.             title:'取消'
  10.         },
  11.         rightBtn:{
  12.             title:'确定'
  13.         }
  14.     },
  15.     mask:'rgba(0,0,0,0.6)',
  16.     selected:'2019-5-29',
  17.     animation: true
  18. },function(ret) { 
  19.     console.log(JSON.stringify(ret));
  20.     if (ret.eventType == 'left') {
  21.         actionDialog.close();
  22.     } else if (ret.eventType == 'right'){
  23.         actionDialog.close();
  24.     } else if (ret.eventType == 'mask') {
  25.         actionDialog.hide();
  26.     }
  27. });

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本

goPay

打开支付选择器

注意：点击本接口弹出的选择器的左右按钮、遮罩层均不会关闭弹框，需要在回调事件里自行调用 close（或 hide）接口关闭。

goPay({params}, callback(ret))

params

styles：

  • 类型：JSON对象
  • 描述：（可选项）模块各部分的样式配置
  • 内部字段：
  1. {
  2.    navigator: {             //（可选项）JSON对象；导航条配置
  3.       h: 44,                //（可选性）数字类型；导航条高度；默认：44
  4.       bg:'#F8F8FF',         //（可选项）字符串类型；导航条背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  5.       titleSize:13,         //（可选性）数字类型；标题文本字体大小；默认：13
  6.       titleColor:'#000000', //（可选项)字符串类型；标题文本颜色，支持rgb、rgba、#；默认：#000000
  7.       title:'',             //（可选项)字符串类型；标题文本；默认：空（不显示） 
  8.        divider: '#0D0D0D', // (可选项)字符串类型；导航条下分隔线的颜色，支持rgb、rgba、#；默认：#0D0D0D 
  9.        dividerSize: 0.3    // (可选项)数字类型；导航条下分隔线的粗细；默认：0.3
  10.    }, 
  11.    leftBtn: {              //（可选项）JSON对象；导航条左边按钮配置，不传则不显示
  12.       w: 50,               //（可选项）数字类型；按钮宽度；默认：50
  13.       h: 34,               //（可选项）数字类型；按钮高度；默认：34
  14.       marginL:10,          //（可选项）数字类型；按钮左边距；默认：10
  15.       bg:'#F8F8FF',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  16.       titleSize:13,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  17.       titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  18.       title:''             //（可选项)字符串类型；按钮标题文本；默认：取消 
  19.    }, 
  20.    rightBtn: {             //（可选项）JSON对象；导航条右边按钮配置，不传则不显示
  21.       w: 50,               //（可选项）数字类型；按钮宽度；默认：50
  22.       h: 34,               //（可选项）数字类型；按钮高度；默认：34
  23.       marginR:10,          //（可选项）数字类型；按钮右边距；默认：10
  24.       bg:'#F8F8FF',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  25.       titleSize:12,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  26.       titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  27.       title:''             //（可选项)字符串类型；按钮标题文本；默认：确定 
  28.    }, 
  29.    content: {               //（可选项）JSON对象；选择器区域样式配置 
  30.       h: 180,                //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：180
  31.       bg:'#F8F8FF',         //（可选项）字符串类型；选择器区域的背景，支持rgb、rgba()、#、img；默认：#F8F8FF
  32.       marginT:40,           //（可选性）数字类型；内容区域上边距（与导航条底部分割线的距离）；默认：40 
  33.       icon:'widget://1.png',//（可选项）字符串类型；图标路径，要求本地路径（widge://、fs://）；默认：无
  34.       iconSize:24,          //（可选性）数字类型；滚轮显示文字大小；默认：24
  35.       iconMarginL:10,       //（可选性）数字类型；图标左边距；默认：10 
  36.       text:'',              //（（可选项）字符串类型；文本内容；默认：空
  37.       textSize:18,          //（可选性）数字类型；文本文字大小；默认：18 
  38.       textColor:'#000000',  //（可选项)字符串类型；文本颜色，支持rgb、rgba、#；默认：#000000 
  39.       check:'widget://1.png',//（可选项）字符串类型；复选框图标路径，要求本地路径（widge://、fs://）；默认：无
  40.       checkSize:24,          //（可选性）数字类型；复选框图标大小大小；默认：24
  41.       checkMarginR:10,       //（可选性）数字类型；图标右边距；默认：10  
  42.       dividerMarginT:10,     //（可选性）数字类型；分割线与icon的距离；默认：10 
  43.        divider: '#696969'     // (可选项)字符串类型；分隔线的颜色，支持rgb、rgba、#；默认：#696969 
  44.        dividerSize: 0.3       // (可选项)数字类型；分隔线的粗细；默认：0.3
  45.    },
  46.    bottomBtn: {              //（可选项）JSON对象；底部按钮样式配置
  47.       w: 300,                //（可选项）数字类型；按钮宽度；默认：300
  48.       h: 34,                 //（可选项）数字类型；按钮高度；默认：34
  49.       corner:5,              //（可选项）数字类型；按钮圆角；默认：0
  50.       marginB:20,            //（可选项）数字类型；按钮下边距；默认：10
  51.       bg:'#7B68EE',          //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#7B68EE
  52.       titleSize:16,          //（可选性）数字类型；按钮标题文本字体大小；默认：16
  53.       titleColor:'#000000',  //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#ffffff
  54.       title:''               //（可选项)字符串类型；按钮标题文本；默认：立即支付 
  55.    }
  56. }

mask:

  • 类型：字符串
  • 描述：（可选项）上部遮罩层配置，支持rgb、rgba、#；
  • 默认：不显示遮罩层

animation:

  • 类型：布尔
  • 描述：（可选项）打开/关闭（显示/隐藏）时是否带动画效果（300毫秒）
  • 默认：true

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：回调参数
  • 内部字段：
  1. {  
  2.       eventType:'left',  //字符串类型；交互事件类型；取值范围：
  3.                           //show:打开并显示事件
  4.                           //left:点击左按钮事件
  5.                           //right:点击右按钮事件
  6.                           //mask:点击遮罩层事件
  7.                           //bottom:底部按钮点击事件 
  8. }

示例代码

  1. var actionDialog = api.require('UIActionDialog');
  2. actionDialog.goPay({
  3.     styles:{
  4.         navigator:{
  5.             divider:'#696969',
  6.             dividerSize:0.3
  7.         },
  8.         rightBtn:{
  9.             title:'取消'
  10.         },
  11.         content:{
  12.             icon:'widget://res/a1.png',
  13.             check:'widget://res/a1.png',
  14.         }
  15.     },
  16.     mask:'rgba(0,0,0,0.6)',
  17.     animation: true
  18. },function(ret) {
  19.     console.log(JSON.stringify(ret));
  20.     if (ret.eventType == 'left') {
  21.         actionDialog.close();
  22.     } else if (ret.eventType == 'mask') {
  23.         actionDialog.hide();
  24.     }
  25. });

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本

pay

打开支付选择器

注意：点击本接口弹出的选择器的左右按钮、遮罩层均不会关闭弹框，需要在回调事件里自行调用 close（或 hide）接口关闭。

pay({params}, callback(ret))

params

styles：

  • 类型：JSON对象
  • 描述：（可选项）模块各部分的样式配置
  • 内部字段：
  1. {
  2.    navigator: {             //（可选项）JSON对象；导航条配置
  3.       h: 44,                //（可选性）数字类型；导航条高度；默认：44
  4.       bg:'#F8F8FF',         //（可选项）字符串类型；导航条背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  5.       leftSize:13,          //（可选性）数字类型；左边文本字体大小；默认：13
  6.       leftColor:'#000000',  //（可选项)字符串类型；左边文本颜色，支持rgb、rgba、#；默认：#000000
  7.       left:'' ,             //（可选项)字符串类型；左边文本；默认：空（不显示） 
  8.       leftMarginL:'' ,      //（可选项)数字类型；左边文本右边距；默认：10 
  9.       rightSize:13,         //（可选性）数字类型；右边文本字体大小；默认：13
  10.       rightColor:'#ff0000', //（可选项)字符串类型；右边文本颜色，支持rgb、rgba、#；默认：#ff0000
  11.       right:'' ,            //（可选项)字符串类型；右边文本；默认：空（不显示） 
  12.       rightMarginR:'' ,     //（可选项)数字类型；右边文本右边距；默认：10
  13.       divider: '#696969',   // (可选项)字符串类型；导航条下分隔线的颜色，支持rgb、rgba、#；默认：#696969 
  14.        dividerSize: 0.3     // (可选项)数字类型；导航条下分隔线的粗细；默认：0.3
  15.    }, 
  16.    content: {              //（可选项）JSON对象；选择器区域样式配置 
  17.       h: 196,              //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：196
  18.       bg:'#F8F8FF',        //（可选项）字符串类型；选择器区域的背景，支持rgb、rgba()、#、img；默认：#F8F8FF
  19.       titleSize:11,        //（可选项）数字类型；左边标题文本字体大小；默认：11
  20.       titleColor:'#000000',//（可选项)字符串类型；左边标题文本颜色，支持rgb、rgba、#；默认：#000000
  21.       title:'' ,           //（可选项)字符串类型；左边标题文本；默认：选择支付方式 
  22.       titleMarginL:'' ,    //（可选项)数字类型；标题文本左边距；默认：10
  23.       titleMarginT:'' ,    //（可选项)数字类型；标题文本上边距；默认：20 
  24.       titleMarginB:'' ,    //（可选项)数字类型；标题文本下边距（距离item选择区定边）；默认：20 
  25.       item: {                //（可选项）JSON对象：每条样式配置
  26.           h:,                //（可选项)数字类型；单条item高度；默认：34 
  27.           iconSize:,         //（可选项)数字类型；图标大小；默认：24 
  28.           iconMarginL:,      //（可选项)数字类型；图标左边距；默认：10 
  29.           titleSize:,        //（可选项)数字类型；标题文本大小；默认：16 
  30.           titleColor:'',     //（可选项)数字类型；标题文本颜色，支持rgb、rgba、#；默认：#000000 
  31.           titleMarginL:,     //（可选项)数字类型；标题图标间距；默认：10 
  32.           selectSize:'24',   //（可选项)数字类型；选中图标大小；默认：24
  33.           active:'',         //（可选项)字符串类型；选中图标路径，要求本地路径（widget://、fs://）；默认：无
  34.           inactive:'',       //（可选项)字符串类型；非选中图标路径，要求本地路径（widget://、fs://）；默认：不显示
  35.           selectMarginR:     //（可选项)数字类型；选中图标右边距；默认：10 
  36.       } 
  37.    },
  38.    bottom: {                 //（可选项）JSON对象；底部区域样式配置
  39.       h: 44,                 //（可选项）数字类型；底部区域高度；默认：34 
  40.       bg:'#F0FFFF',          //（可选项）字符串类型；底部区域背景色，支持rgb、rgba()、#、img；默认：#F0FFFF
  41.        divider: '#696969',   // (可选项)字符串类型；模块下分隔线的颜色，支持rgb、rgba、#；默认：#696969 
  42.        dividerSize: 0.3      // (可选项)数字类型；模块下分隔线的粗细；默认：0.3
  43.       button: {
  44.          w: 300,                //（可选项）数字类型；按钮宽度；默认：300
  45.          h: 34,                 //（可选项）数字类型；按钮高度；默认：34
  46.          corner:5,              //（可选项）数字类型；按钮圆角大小；默认：0
  47.          marginB:5,             //（可选项）数字类型；按钮下边距；默认：5
  48.          bg:'#7B68EE',          //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#7B68EE
  49.          titleSize:13,          //（可选性）数字类型；按钮标题文本字体大小；默认：12
  50.          titleColor:'#000000',  //（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  51.          title:''               //（可选项)字符串类型；按钮标题文本；默认：空 
  52.       }
  53.    }
  54. }

datas:

  • 类型：数组
  • 描述：选择项数据源
  • 内部字段：
  1. [{
  2.      icon:'',      //字符串：图标路径，要求本地路径（widget://、fs://）
  3.      title:''      //字符串类型；文本内容
  4. },...]

mask:

  • 类型：字符串
  • 描述：（可选项）上部遮罩层配置，支持rgb、rgba、#；
  • 默认：不显示遮罩层

selected:

  • 类型：字符串
  • 描述：默认当前选中项的下标
  • 默认：0

animation:

  • 类型：布尔
  • 描述：（可选项）打开/关闭（显示/隐藏）时是否带动画效果（300毫秒）
  • 默认：true

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：回调参数
  • 内部字段：
  1. {   
  2.       eventType:'left',  //字符串类型；交互事件类型；取值范围：
  3.                           //show:打开并显示事件
  4.                           //mask:点击遮罩层事件
  5.                           //bottom:点击底部按钮事件 
  6.       selected:           //数字类型；选中项下标仅当 eventType为 bottom时有值
  7. }

示例代码

  1. var actionDialog = api.require('UIActionDialog');
  2. actionDialog.pay({
  3.     styles:{
  4.         navigator:{
  5.             left:'需支付',
  6.             right:'20元',
  7.             rightColor:'#ff0000'
  8.         },
  9.         content:{
  10.             title:'请选择支付方式：',
  11.             item:{
  12.                 active:'widget://res/car1.png',
  13.                 inactive:'widget://res/car2.png'
  14.             }
  15.         },
  16.         bottom:{
  17.             button:{
  18.                 title:'立即支付',
  19.             }
  20.         }
  21.     },
  22.     datas:[{
  23.     icon:'widget://res/scroll4.png',
  24.     title:'微信'
  25.     },{
  26.     icon:'widget://res/scroll5.png',
  27.     title:'微博'
  28.     },{
  29.     icon:'widget://res/car16.png',
  30.     title:'QQ'
  31.     }],
  32.     mask:'rgba(0,0,0,0.6)',
  33.     animation: true
  34. },function(ret) {
  35.     console.log(JSON.stringify(ret));
  36.     if (ret.eventType == 'bottom') {
  37.         actionDialog.close();
  38.     } else if (ret.eventType == 'mask') {
  39.         actionDialog.close();
  40.     } 
  41. });

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本

payBy

打开支付选择器

注意：点击本接口弹出的选择器的左右按钮、遮罩层均不会关闭弹框，需要在回调事件里自行调用 close（或 hide）接口关闭。

payBy({params}, callback(ret))

params

styles：

  • 类型：JSON对象
  • 描述：（可选项）模块各部分的样式配置
  • 内部字段：
  1. {
  2.    navigator: {             //（可选项）JSON对象；导航条配置
  3.       h: 44,                //（可选项）数字类型；导航条高度；默认：44
  4.       corner:5,             //（可选项）数字类型；导航条顶部左右两角的圆角大小；默认：5
  5.       bg:'#F8F8FF',         //（可选项）字符串类型；导航条背景色，支持rgb、rgba()、#、img；默认：#F8F8FF 
  6.       titleSize:13,         //（可选性）数字类型；标题文本字体大小；默认：13
  7.       titleColor:'#000000', //（可选项)字符串类型；标题文本颜色，支持rgb、rgba、#；默认：#000000
  8.       title:'',             //（可选项)字符串类型；标题文本；默认：'支付方式' 
  9.       divider: '#696969',   // (可选项)字符串类型；导航条下分隔线的颜色，支持rgb、rgba、#；默认：#696969 
  10.       dividerSize: 0.3      // (可选项)数字类型；导航条下分隔线的粗细；默认：0.3
  11.    }, 
  12.    leftBtn: {              //（可选项）JSON对象；导航条左边按钮配置，不传则不显示
  13.       w: 50,               //（可选项）数字类型；按钮宽度；默认：50
  14.       h: 34,               //（可选项）数字类型；按钮高度；默认：34
  15.       marginL:10,          //（可选项）数字类型；按钮左边距；默认：10
  16.       bg:'#F8F8FF',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  17.       titleSize:13,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  18.       titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  19.       title:''             //（可选项)字符串类型；按钮标题文本；默认：取消 
  20.    }, 
  21.    rightBtn: {             //（可选项）JSON对象；导航条右边按钮配置，不传则不显示
  22.       w: 50,               //（可选项）数字类型；按钮宽度；默认：50
  23.       h: 34,               //（可选项）数字类型；按钮高度；默认：34
  24.       marginR:10,          //（可选项）数字类型；按钮右边距；默认：10
  25.       bg:'#F8F8FF',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#F8F8FF
  26.       titleSize:12,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  27.       titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  28.       title:''             //（可选项)字符串类型；按钮标题文本；默认：确定 
  29.    }, 
  30.    content: {                //（可选项）JSON对象；选择器区域样式配置 不显示
  31.       h: 132,                //（可选项）数字类型；选择器区域的高度（从导航条下分割线到屏幕最底端的高度）；默认：132 
  32.       bg:'#F8F8FF',          //（可选项）字符串类型；选择器区域的背景，支持rgb、rgba()、#、img；默认：#F8F8FF
  33.       item: {                //（可选项）JSON对象：每条样式配置 
  34.           marginT:,          //（可选项)数字类型；距离顶部大小；默认：30 
  35.           iconSize:,         //（可选项)数字类型；图标大小；默认：44 
  36.           interval:,         //（可选项)数字类型；icon和标题之间的间距；默认：10 
  37.           titleSize:,        //（可选项)数字类型；标题文本大小；默认：13
  38.           titleColor:'',     //（可选项)数字类型；标题文本颜色，支持rgb、rgba、#；默认：#000000   
  39.            number: 3         // (可选项)数字类型；每屏显示item 个数，超出的 item 可左右拖动查看。；默认：3
  40.       } 
  41.    } 
  42. }

datas:

  • 类型：数组
  • 描述：选择项数据源
  • 内部字段：
  1. [{
  2.      icon:'',      //字符串：图标路径，要求本地路径（widget://、fs://）
  3.      title:''      //字符串类型；文本内容
  4. },...]

mask:

  • 类型：字符串
  • 描述：（可选项）上部遮罩层配置，支持rgb、rgba、#；
  • 默认：不显示遮罩层

animation:

  • 类型：布尔
  • 描述：（可选项）打开/关闭（显示/隐藏）时是否带动画效果（300毫秒）
  • 默认：true

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：回调参数
  • 内部字段：
  1. {   
  2.       eventType:'left',  //字符串类型；交互事件类型；取值范围：
  3.                           //show:打开并显示事件 
  4.                           //left:点击左按钮事件
  5.                           //right:点击右按钮事件
  6.                           //mask:点击遮罩层事件
  7.                           //select:  选中项改变事件
  8.       index:              //数字类型；选中项下标，仅当 eventType 为 select 时有值
  9. }

示例代码

  1. var actionDialog = api.require('UIActionDialog');
  2. actionDialog.payBy({
  3.     styles:{
  4.         rightBtn:{
  5.             title:'取消'
  6.         }
  7.     },
  8.     datas:[{
  9.         icon:'widget://res/scroll4.png',
  10.         title:'微信'
  11.     },{
  12.         icon:'widget://res/scroll5.png',
  13.         title:'微博'
  14.     },{
  15.         icon:'widget://res/car14.png',
  16.         title:'账号'
  17.     },{
  18.         icon:'widget://res/car16.png',
  19.         title:'QQ'
  20.     }],
  21.     mask:'rgba(0,0,0,0.6)',
  22.     animation: true
  23. },function(ret) {
  24.     console.log(JSON.stringify(ret));
  25.     if (ret.eventType == 'left') {
  26.         actionDialog.close();
  27.     } else if (ret.eventType == 'mask') {
  28.         actionDialog.hide();
  29.     } else if (ret.eventType == 'select') {
  30.         console.log(JSON.stringify(ret));
  31.     }
  32. });

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本

payFor

打开支付选择器

注意：点击本接口弹出的选择器的左右按钮、遮罩层均不会关闭弹框，需要在回调事件里自行调用 close（或 hide）接口关闭。

payFor({params}, callback(ret))

params

styles：

  • 类型：JSON对象
  • 描述：（可选项）模块各部分的样式配置
  • 内部字段：
  1. {
  2.       h: 240,              //（可选性）数字类型；选择器高度；默认：240
  3.       corner:10,           //（可选项）数字类型；选择器顶部左右两角的圆角大小；默认：10
  4.       bg:'#F8F8FF',        //（可选项）字符串类型；背景，支持rgb、rgba()、#、img；默认：#F8F8FF
  5.       title: {
  6.           size:11,          //（可选性）数字类型；标题文本字体大小；默认：11
  7.           color:'#000000',  //（可选项)字符串类型；标题文本颜色，支持rgb、rgba、#；默认：#000000
  8.           text:'' ,         //（可选项)字符串类型；标题文本；默认：实际支付： 
  9.           marginL:10 ,      //（可选项)数字类型；标题文本右边距；默认：10
  10.           marginT:20 ,      //（可选项)数字类型；标题文本顶边距（距离选择器顶部距离）；默认：20
  11.       },  
  12.       content:{
  13.          text:'' ,             //（可选项)字符串类型；标题文本；默认：空（不显示）    
  14.          h:34,                 //（可选项）数字类型；内容文本区域高度；默认:34
  15.           marginL:10 ,          //（可选项)数字类型；内容文本区域右边距；默认：10
  16.           marginT:10 ,          //（可选项)数字类型；内容文本区域顶边距（距离选择器顶部距离）；默认：10
  17.           marginB:20 ,          //（可选项)数字类型；内容文本区域顶边距（距离选择器顶部距离）；默认：20
  18.          rich: [{              //数组类型；内容文本的富文本样式配置 
  19.               range:{          //JSON 对象；富文本配置的起点和长度
  20.                 start:0,       //数字类型；起点；默认：0
  21.                 length:1       //数字类型；长度；默认：1
  22.               },
  23.              size:10,          //数字类型；字体大小；默认：9
  24.              color:‘#ff0000’   //字符串类型；字体颜色，支持rgb、rgba、#；默认：#ff0000
  25.            },...]
  26.      },              
  27.      item: {                //（可选项）JSON对象：每条样式配置
  28.          h:,                //（可选项)数字类型；单条item高度；默认：34 
  29.          iconSize:,         //（可选项)数字类型；图标大小；默认：24 
  30.          iconMarginL:,      //（可选项)数字类型；图标左边距；默认：10 
  31.          titleSize:,        //（可选项)数字类型；标题文本大小；默认：16 
  32.          titleColor:'',     //（可选项)数字类型；标题文本颜色，支持rgb、rgba、#；默认：#000000 
  33.          titleMarginL:,     //（可选项)数字类型；标题图标间距；默认：10 
  34.          selectSize:'24',   //（可选项)数字类型；选中图标大小；默认：24
  35.          active:'',         //（可选项)字符串类型；选中图标路径，要求本地路径（widget://、fs://）；默认：无
  36.          inactive:'',       //（可选项)字符串类型；非选中图标路径，要求本地路径（widget://、fs://）；默认：不显示
  37.          selectMarginR:     //（可选项)数字类型；选中图标右边距；默认：10 
  38.      }  
  39.      bottom: {                  //（可选项）JSON对象；底部区域样式配置
  40.          h: 44,                 //（可选项）数字类型；底部区域高度；默认：34 
  41.          bg:'#F0FFFF',          //（可选项）字符串类型；底部区域背景色，支持rgb、rgba()、#、img；默认：#F0FFFF
  42.          divider: '#696969',    // (可选项)字符串类型；模块下分隔线的颜色，支持rgb、rgba、#；默认：#696969 
  43.          dividerSize: 0         // (可选项)数字类型；模块下分隔线的粗细；默认：0
  44.         button: {
  45.            w: 300,              //（可选项）数字类型；按钮宽度；默认：300
  46.            h: 34,               //（可选项）数字类型；按钮高度；默认：34
  47.            corner:5,              //（可选项）数字类型；按钮圆角；默认：0
  48.            marginB:5,           //（可选项）数字类型；按钮下边距；默认：5
  49.            bg:'#7B68EE',        //（可选项）字符串类型；按钮背景色，支持rgb、rgba()、#、img；默认：#7B68EE
  50.            titleSize:13,        //（可选性）数字类型；按钮标题文本字体大小；默认：12
  51.            titleColor:'#000000',//（可选项)字符串类型；按钮标题文本颜色，支持rgb、rgba、#；默认：#000000
  52.            title:''             //（可选项)字符串类型；按钮标题文本；默认：空 
  53.         } 
  54.      }
  55. }

datas:

  • 类型：数组
  • 描述：选择项数据源
  • 内部字段：
  1. [{
  2.      icon:'',      //字符串：图标路径，要求本地路径（widget://、fs://）
  3.      title:''      //字符串类型；文本内容
  4. },...]

mask:

  • 类型：字符串
  • 描述：（可选项）上部遮罩层配置，支持rgb、rgba、#；
  • 默认：不显示遮罩层

index:

  • 类型：字符串
  • 描述：默认当前选中项的下标
  • 默认：0

animation:

  • 类型：布尔
  • 描述：（可选项）打开/关闭（显示/隐藏）时是否带动画效果（300毫秒）
  • 默认：true

callback(ret)

ret：

  • 类型：JSON对象
  • 描述：回调参数
  • 内部字段：
  1. {   
  2.       eventType:'left',  //字符串类型；交互事件类型；取值范围：
  3.                           //show:打开并显示事件
  4.                           //mask:点击遮罩层事件
  5.                           //bottom:点击底部按钮事件 
  6.       index:              //数字类型；选中项下标，仅当 eventType 为 bottom 时有值
  7. }

示例代码

  1. var actionDialog = api.require('UIActionDialog');
  2. actionDialog.payFor({
  3.     styles:{
  4.         title:{
  5.             text:'实际支付：',
  6.         },
  7.         content:{
  8.             text:'¥660（需支付：¥670）',
  9.             rich:[{
  10.                 range:{start:0,length:1},
  11.                 size:9,
  12.                 color:'#000000'
  13.             },{
  14.                 range:{start:1,length:3},
  15.                 size:24,
  16.                 color:'#ff0000'
  17.             },{
  18.                 range:{start:4,length:12},
  19.                 size:9,
  20.                 color:'#DCDCDC'
  21.             }]
  22.         },
  23.         item:{
  24.             active:'widget://res/car1.png',
  25.             //inactive:'widget://res/car2.png'
  26.         },
  27.         bottom:{
  28.             button:{
  29.                 title:'保存',
  30.             }
  31.         }
  32.     },
  33.     datas:[{
  34.         icon:'widget://res/scroll4.png',
  35.         title:'微信'
  36.     },{
  37.         icon:'widget://res/scroll5.png',
  38.         title:'支付宝'
  39.     }],
  40.     mask:'rgba(0,0,0,0.6)',
  41.     animation: true
  42. },function(ret) {
  43.     console.log(JSON.stringify(ret));
  44.     if (ret.eventType == 'bottom') {
  45.         actionDialog.close();
  46.     } else if (ret.eventType == 'mask') {
  47.         actionDialog.close();
  48.     }
  49. });

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本

hide

隐藏对话框 仅支持ios

hide({params})

params

animation:

  • 类型：布尔
  • 描述：（可选项）是否带动画效果（300毫秒）
  • 默认：true

示例代码

  1. var UIActionDialog = api.require('UIActionDialog');
  2. UIActionDialog.hide({
  3.    animation:true
  4. });

可用性

iOS

可提供的 1.0.0 及更高版本

show

显示已隐藏的模块 仅支持ios

show({params})

params

animation:

  • 类型：布尔
  • 描述：（可选项）是否带动画效果（300毫秒）
  • 默认：true

示例代码

  1. var UIActionDialog = api.require('UIActionDialog');
  2. UIActionDialog.show({
  3.    animation:true
  4. });

可用性

iOS

可提供的 1.0.0 及更高版本

close

关闭模块（从内存里清除）

close({params})

params

animation:

  • 类型：布尔
  • 描述：（可选项）是否带动画效果（300毫秒）
  • 默认：true

示例代码

  1. var UIActionDialog = api.require('UIActionDialog');
  2. UIActionDialog.close({
  3.    animation:true
  4. });

可用性

iOS，android 系统

可提供的 1.0.0 及更高版本