UIActionDialog

论坛示例

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

概述

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对象
  • 描述:(可选项)插件各部分的样式配置
  • 内部字段:
{
   navigator: {             //(可选项)JSON对象;导航条配置
      h: 44,                //(可选性)数字类型;导航条高度;默认:44
      bg:'#F8F8FF',         //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:13,        //(可选性)数字类型;标题文本字体大小;默认:13
      titleColor:'#000000',//(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:'' ,           //(可选项)字符串类型;标题文本;默认:空(不显示) 
       divider: '#696969', // (可选项)字符串类型;导航条下分隔线的颜色,支持rgb、rgba、#;默认:#696969 
       dividerSize: 0.3    // (可选项)数字类型;导航条下分隔线的粗细;默认:0.3
   }, 
   leftBtn: {              //(可选项)JSON对象;导航条左边按钮配置,不传则不显示
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginL:10,          //(可选项)数字类型;按钮左边距;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:13,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:''             //(可选项)字符串类型;按钮标题文本;默认:取消 
   }, 
   rightBtn: {             //(可选项)JSON对象;导航条右边按钮配置,不传则不显示
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginR:10,          //(可选项)数字类型;按钮右边距;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:12,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:''             //(可选项)字符串类型;按钮标题文本;默认:确定 
   },  
   content: {              //(可选项)JSON对象;选择器区域样式配置 
      h: 220,                //(可选项)数字类型;选择器区域的高度(从导航条下分割线到屏幕最底端的高度);默认:220
      bg:'#F5F5F5',        //(可选项)字符串类型;选择器背景,支持rgb、rgba()、#、img;默认:#F5F5F5
      size:16,             //(可选性)数字类型;滚轮显示文字大小;默认:16
      active:'#ff0000',    //(可选项)字符串类型;滑到选中位置后的文本颜色,支持rgb、rgba、#;默认:#ff0000 
      inactive:'#00000',  //(可选项)字符串类型;滑到非选中位置后的文本颜色,支持rgb、rgba、#;默认:#00000 
       divider: '#ff0000', // (可选项)字符串类型;选中项上下分隔线的颜色,支持rgb、rgba、#,不传不显示;默认:不显示
       dividerSize: 0.3,   // (可选项)数字类型;选中项上下分隔线的粗细;默认:0.5
       row:5,              //(可选项)数字类型;显示几行;默认:5
       fromYears:1919,     //(可选项)数字类型;开始年份;默认:当前年份之前100年
       toYears:2119        //(可选项)数字类型;终止年份;默认:当前年份之后100年
   }
}

mask:

  • 类型:字符串
  • 描述:(可选项)上部遮罩层配置,支持rgb、rgba、#;
  • 默认:不显示遮罩层

selected:

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

animation:

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

callback(ret)

ret:

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

示例代码

var actionDialog = api.require('UIActionDialog');
actionDialog.datePicker({
    styles:{
        navigator:{
            divider:'#696969',
            dividerSize:0.3
        },
        leftBtn:{
            title:'取消'
        },
        rightBtn:{
            title:'确定'
        }
    },
    mask:'rgba(0,0,0,0.6)',
    selected:'2019-5-29',
    animation: true
},function(ret) { 
    console.log(JSON.stringify(ret));
    if (ret.eventType == 'left') {
        actionDialog.close();
    } else if (ret.eventType == 'right'){
        actionDialog.close();
    } else if (ret.eventType == 'mask') {
        actionDialog.hide();
    }
});

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

goPay

打开支付选择器

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

goPay({params}, callback(ret))

params

styles:

  • 类型:JSON对象
  • 描述:(可选项)插件各部分的样式配置
  • 内部字段:
{
   navigator: {             //(可选项)JSON对象;导航条配置
      h: 44,                //(可选性)数字类型;导航条高度;默认:44
      bg:'#F8F8FF',         //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:13,         //(可选性)数字类型;标题文本字体大小;默认:13
      titleColor:'#000000', //(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:'',             //(可选项)字符串类型;标题文本;默认:空(不显示) 
       divider: '#0D0D0D', // (可选项)字符串类型;导航条下分隔线的颜色,支持rgb、rgba、#;默认:#0D0D0D 
       dividerSize: 0.3    // (可选项)数字类型;导航条下分隔线的粗细;默认:0.3
   }, 
   leftBtn: {              //(可选项)JSON对象;导航条左边按钮配置,不传则不显示
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginL:10,          //(可选项)数字类型;按钮左边距;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:13,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:''             //(可选项)字符串类型;按钮标题文本;默认:取消 
   }, 
   rightBtn: {             //(可选项)JSON对象;导航条右边按钮配置,不传则不显示
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginR:10,          //(可选项)数字类型;按钮右边距;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:12,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:''             //(可选项)字符串类型;按钮标题文本;默认:确定 
   }, 
   content: {               //(可选项)JSON对象;选择器区域样式配置 
      h: 180,                //(可选项)数字类型;选择器区域的高度(从导航条下分割线到屏幕最底端的高度);默认:180
      bg:'#F8F8FF',         //(可选项)字符串类型;选择器区域的背景,支持rgb、rgba()、#、img;默认:#F8F8FF
      marginT:40,           //(可选性)数字类型;内容区域上边距(与导航条底部分割线的距离);默认:40 
      icon:'widget://1.png',//(可选项)字符串类型;图标路径,要求本地路径(widge://、fs://);默认:无
      iconSize:24,          //(可选性)数字类型;滚轮显示文字大小;默认:24
      iconMarginL:10,       //(可选性)数字类型;图标左边距;默认:10 
      text:'',              //((可选项)字符串类型;文本内容;默认:空
      textSize:18,          //(可选性)数字类型;文本文字大小;默认:18 
      textColor:'#000000',  //(可选项)字符串类型;文本颜色,支持rgb、rgba、#;默认:#000000 
      check:'widget://1.png',//(可选项)字符串类型;复选框图标路径,要求本地路径(widge://、fs://);默认:无
      checkSize:24,          //(可选性)数字类型;复选框图标大小大小;默认:24
      checkMarginR:10,       //(可选性)数字类型;图标右边距;默认:10  
      dividerMarginT:10,     //(可选性)数字类型;分割线与icon的距离;默认:10 
       divider: '#696969'     // (可选项)字符串类型;分隔线的颜色,支持rgb、rgba、#;默认:#696969 
       dividerSize: 0.3       // (可选项)数字类型;分隔线的粗细;默认:0.3
   },
   bottomBtn: {              //(可选项)JSON对象;底部按钮样式配置
      w: 300,                //(可选项)数字类型;按钮宽度;默认:300
      h: 34,                 //(可选项)数字类型;按钮高度;默认:34
      corner:5,              //(可选项)数字类型;按钮圆角;默认:0
      marginB:20,            //(可选项)数字类型;按钮下边距;默认:10
      bg:'#7B68EE',          //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#7B68EE
      titleSize:16,          //(可选性)数字类型;按钮标题文本字体大小;默认:16
      titleColor:'#000000',  //(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#ffffff
      title:''               //(可选项)字符串类型;按钮标题文本;默认:立即支付 
   }
}

mask:

  • 类型:字符串
  • 描述:(可选项)上部遮罩层配置,支持rgb、rgba、#;
  • 默认:不显示遮罩层

animation:

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

callback(ret)

ret:

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

示例代码

var actionDialog = api.require('UIActionDialog');
actionDialog.goPay({
    styles:{
        navigator:{
            divider:'#696969',
            dividerSize:0.3
        },
        rightBtn:{
            title:'取消'
        },
        content:{
            icon:'widget://res/a1.png',
            check:'widget://res/a1.png',
        }
    },
    mask:'rgba(0,0,0,0.6)',
    animation: true
},function(ret) {
    console.log(JSON.stringify(ret));
    if (ret.eventType == 'left') {
        actionDialog.close();
    } else if (ret.eventType == 'mask') {
        actionDialog.hide();
    }
});

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

pay

打开支付选择器

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

pay({params}, callback(ret))

params

styles:

  • 类型:JSON对象
  • 描述:(可选项)插件各部分的样式配置
  • 内部字段:
{
   navigator: {             //(可选项)JSON对象;导航条配置
      h: 44,                //(可选性)数字类型;导航条高度;默认:44
      bg:'#F8F8FF',         //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      leftSize:13,          //(可选性)数字类型;左边文本字体大小;默认:13
      leftColor:'#000000',  //(可选项)字符串类型;左边文本颜色,支持rgb、rgba、#;默认:#000000
      left:'' ,             //(可选项)字符串类型;左边文本;默认:空(不显示) 
      leftMarginL:'' ,      //(可选项)数字类型;左边文本右边距;默认:10 
      rightSize:13,         //(可选性)数字类型;右边文本字体大小;默认:13
      rightColor:'#ff0000', //(可选项)字符串类型;右边文本颜色,支持rgb、rgba、#;默认:#ff0000
      right:'' ,            //(可选项)字符串类型;右边文本;默认:空(不显示) 
      rightMarginR:'' ,     //(可选项)数字类型;右边文本右边距;默认:10
      divider: '#696969',   // (可选项)字符串类型;导航条下分隔线的颜色,支持rgb、rgba、#;默认:#696969 
       dividerSize: 0.3     // (可选项)数字类型;导航条下分隔线的粗细;默认:0.3
   }, 
   content: {              //(可选项)JSON对象;选择器区域样式配置 
      h: 196,              //(可选项)数字类型;选择器区域的高度(从导航条下分割线到屏幕最底端的高度);默认:196
      bg:'#F8F8FF',        //(可选项)字符串类型;选择器区域的背景,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:11,        //(可选项)数字类型;左边标题文本字体大小;默认:11
      titleColor:'#000000',//(可选项)字符串类型;左边标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:'' ,           //(可选项)字符串类型;左边标题文本;默认:选择支付方式 
      titleMarginL:'' ,    //(可选项)数字类型;标题文本左边距;默认:10
      titleMarginT:'' ,    //(可选项)数字类型;标题文本上边距;默认:20 
      titleMarginB:'' ,    //(可选项)数字类型;标题文本下边距(距离item选择区定边);默认:20 
      item: {                //(可选项)JSON对象:每条样式配置
          h:,                //(可选项)数字类型;单条item高度;默认:34 
          iconSize:,         //(可选项)数字类型;图标大小;默认:24 
          iconMarginL:,      //(可选项)数字类型;图标左边距;默认:10 
          titleSize:,        //(可选项)数字类型;标题文本大小;默认:16 
          titleColor:'',     //(可选项)数字类型;标题文本颜色,支持rgb、rgba、#;默认:#000000 
          titleMarginL:,     //(可选项)数字类型;标题图标间距;默认:10 
          selectSize:'24',   //(可选项)数字类型;选中图标大小;默认:24
          active:'',         //(可选项)字符串类型;选中图标路径,要求本地路径(widget://、fs://);默认:无
          inactive:'',       //(可选项)字符串类型;非选中图标路径,要求本地路径(widget://、fs://);默认:不显示
          selectMarginR:     //(可选项)数字类型;选中图标右边距;默认:10 
      } 
   },
   bottom: {                 //(可选项)JSON对象;底部区域样式配置
      h: 44,                 //(可选项)数字类型;底部区域高度;默认:34 
      bg:'#F0FFFF',          //(可选项)字符串类型;底部区域背景色,支持rgb、rgba()、#、img;默认:#F0FFFF
       divider: '#696969',   // (可选项)字符串类型;插件下分隔线的颜色,支持rgb、rgba、#;默认:#696969 
       dividerSize: 0.3      // (可选项)数字类型;插件下分隔线的粗细;默认:0.3
      button: {
         w: 300,                //(可选项)数字类型;按钮宽度;默认:300
         h: 34,                 //(可选项)数字类型;按钮高度;默认:34
         corner:5,              //(可选项)数字类型;按钮圆角大小;默认:0
         marginB:5,             //(可选项)数字类型;按钮下边距;默认:5
         bg:'#7B68EE',          //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#7B68EE
         titleSize:13,          //(可选性)数字类型;按钮标题文本字体大小;默认:12
         titleColor:'#000000',  //(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
         title:''               //(可选项)字符串类型;按钮标题文本;默认:空 
      }
   }
}

datas:

  • 类型:数组
  • 描述:选择项数据源
  • 内部字段:
[{
     icon:'',      //字符串:图标路径,要求本地路径(widget://、fs://)
     title:''      //字符串类型;文本内容
},...]

mask:

  • 类型:字符串
  • 描述:(可选项)上部遮罩层配置,支持rgb、rgba、#;
  • 默认:不显示遮罩层

selected:

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

animation:

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

callback(ret)

ret:

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

示例代码

var actionDialog = api.require('UIActionDialog');
actionDialog.pay({
    styles:{
        navigator:{
            left:'需支付',
            right:'20元',
            rightColor:'#ff0000'
        },
        content:{
            title:'请选择支付方式:',
            item:{
                active:'widget://res/car1.png',
                inactive:'widget://res/car2.png'
            }
        },
        bottom:{
            button:{
                title:'立即支付',
            }
        }
    },
    datas:[{
    icon:'widget://res/scroll4.png',
    title:'微信'
    },{
    icon:'widget://res/scroll5.png',
    title:'微博'
    },{
    icon:'widget://res/car16.png',
    title:'QQ'
    }],
    mask:'rgba(0,0,0,0.6)',
    animation: true
},function(ret) {
    console.log(JSON.stringify(ret));
    if (ret.eventType == 'bottom') {
        actionDialog.close();
    } else if (ret.eventType == 'mask') {
        actionDialog.close();
    } 
});

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

payBy

打开支付选择器

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

payBy({params}, callback(ret))

params

styles:

  • 类型:JSON对象
  • 描述:(可选项)插件各部分的样式配置
  • 内部字段:
{
   navigator: {             //(可选项)JSON对象;导航条配置
      h: 44,                //(可选项)数字类型;导航条高度;默认:44
      corner:5,             //(可选项)数字类型;导航条顶部左右两角的圆角大小;默认:5
      bg:'#F8F8FF',         //(可选项)字符串类型;导航条背景色,支持rgb、rgba()、#、img;默认:#F8F8FF 
      titleSize:13,         //(可选性)数字类型;标题文本字体大小;默认:13
      titleColor:'#000000', //(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:'',             //(可选项)字符串类型;标题文本;默认:'支付方式' 
      divider: '#696969',   // (可选项)字符串类型;导航条下分隔线的颜色,支持rgb、rgba、#;默认:#696969 
      dividerSize: 0.3      // (可选项)数字类型;导航条下分隔线的粗细;默认:0.3
   }, 
   leftBtn: {              //(可选项)JSON对象;导航条左边按钮配置,不传则不显示
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginL:10,          //(可选项)数字类型;按钮左边距;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:13,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:''             //(可选项)字符串类型;按钮标题文本;默认:取消 
   }, 
   rightBtn: {             //(可选项)JSON对象;导航条右边按钮配置,不传则不显示
      w: 50,               //(可选项)数字类型;按钮宽度;默认:50
      h: 34,               //(可选项)数字类型;按钮高度;默认:34
      marginR:10,          //(可选项)数字类型;按钮右边距;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#F8F8FF
      titleSize:12,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
      titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
      title:''             //(可选项)字符串类型;按钮标题文本;默认:确定 
   }, 
   content: {                //(可选项)JSON对象;选择器区域样式配置 不显示
      h: 132,                //(可选项)数字类型;选择器区域的高度(从导航条下分割线到屏幕最底端的高度);默认:132 
      bg:'#F8F8FF',          //(可选项)字符串类型;选择器区域的背景,支持rgb、rgba()、#、img;默认:#F8F8FF
      item: {                //(可选项)JSON对象:每条样式配置 
          marginT:,          //(可选项)数字类型;距离顶部大小;默认:30 
          iconSize:,         //(可选项)数字类型;图标大小;默认:44 
          interval:,         //(可选项)数字类型;icon和标题之间的间距;默认:10 
          titleSize:,        //(可选项)数字类型;标题文本大小;默认:13
          titleColor:'',     //(可选项)数字类型;标题文本颜色,支持rgb、rgba、#;默认:#000000   
           number: 3         // (可选项)数字类型;每屏显示item 个数,超出的 item 可左右拖动查看。;默认:3
      } 
   } 
}

datas:

  • 类型:数组
  • 描述:选择项数据源
  • 内部字段:
[{
     icon:'',      //字符串:图标路径,要求本地路径(widget://、fs://)
     title:''      //字符串类型;文本内容
},...]

mask:

  • 类型:字符串
  • 描述:(可选项)上部遮罩层配置,支持rgb、rgba、#;
  • 默认:不显示遮罩层

animation:

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

callback(ret)

ret:

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

示例代码

var actionDialog = api.require('UIActionDialog');
actionDialog.payBy({
    styles:{
        rightBtn:{
            title:'取消'
        }
    },
    datas:[{
        icon:'widget://res/scroll4.png',
        title:'微信'
    },{
        icon:'widget://res/scroll5.png',
        title:'微博'
    },{
        icon:'widget://res/car14.png',
        title:'账号'
    },{
        icon:'widget://res/car16.png',
        title:'QQ'
    }],
    mask:'rgba(0,0,0,0.6)',
    animation: true
},function(ret) {
    console.log(JSON.stringify(ret));
    if (ret.eventType == 'left') {
        actionDialog.close();
    } else if (ret.eventType == 'mask') {
        actionDialog.hide();
    } else if (ret.eventType == 'select') {
        console.log(JSON.stringify(ret));
    }
});

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

payFor

打开支付选择器

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

payFor({params}, callback(ret))

params

styles:

  • 类型:JSON对象
  • 描述:(可选项)插件各部分的样式配置
  • 内部字段:
{
      h: 240,              //(可选性)数字类型;选择器高度;默认:240
      corner:10,           //(可选项)数字类型;选择器顶部左右两角的圆角大小;默认:10
      bg:'#F8F8FF',        //(可选项)字符串类型;背景,支持rgb、rgba()、#、img;默认:#F8F8FF
      title: {
          size:11,          //(可选性)数字类型;标题文本字体大小;默认:11
          color:'#000000',  //(可选项)字符串类型;标题文本颜色,支持rgb、rgba、#;默认:#000000
          text:'' ,         //(可选项)字符串类型;标题文本;默认:实际支付: 
          marginL:10 ,      //(可选项)数字类型;标题文本右边距;默认:10
          marginT:20 ,      //(可选项)数字类型;标题文本顶边距(距离选择器顶部距离);默认:20
      },  
      content:{
         text:'' ,             //(可选项)字符串类型;标题文本;默认:空(不显示)    
         h:34,                 //(可选项)数字类型;内容文本区域高度;默认:34
          marginL:10 ,          //(可选项)数字类型;内容文本区域右边距;默认:10
          marginT:10 ,          //(可选项)数字类型;内容文本区域顶边距(距离选择器顶部距离);默认:10
          marginB:20 ,          //(可选项)数字类型;内容文本区域顶边距(距离选择器顶部距离);默认:20
         rich: [{              //数组类型;内容文本的富文本样式配置 
              range:{          //JSON 对象;富文本配置的起点和长度
                start:0,       //数字类型;起点;默认:0
                length:1       //数字类型;长度;默认:1
              },
             size:10,          //数字类型;字体大小;默认:9
             color:‘#ff0000’   //字符串类型;字体颜色,支持rgb、rgba、#;默认:#ff0000
           },...]
     },              
     item: {                //(可选项)JSON对象:每条样式配置
         h:,                //(可选项)数字类型;单条item高度;默认:34 
         iconSize:,         //(可选项)数字类型;图标大小;默认:24 
         iconMarginL:,      //(可选项)数字类型;图标左边距;默认:10 
         titleSize:,        //(可选项)数字类型;标题文本大小;默认:16 
         titleColor:'',     //(可选项)数字类型;标题文本颜色,支持rgb、rgba、#;默认:#000000 
         titleMarginL:,     //(可选项)数字类型;标题图标间距;默认:10 
         selectSize:'24',   //(可选项)数字类型;选中图标大小;默认:24
         active:'',         //(可选项)字符串类型;选中图标路径,要求本地路径(widget://、fs://);默认:无
         inactive:'',       //(可选项)字符串类型;非选中图标路径,要求本地路径(widget://、fs://);默认:不显示
         selectMarginR:     //(可选项)数字类型;选中图标右边距;默认:10 
     }  
     bottom: {                  //(可选项)JSON对象;底部区域样式配置
         h: 44,                 //(可选项)数字类型;底部区域高度;默认:34 
         bg:'#F0FFFF',          //(可选项)字符串类型;底部区域背景色,支持rgb、rgba()、#、img;默认:#F0FFFF
         divider: '#696969',    // (可选项)字符串类型;插件下分隔线的颜色,支持rgb、rgba、#;默认:#696969 
         dividerSize: 0         // (可选项)数字类型;插件下分隔线的粗细;默认:0
        button: {
           w: 300,              //(可选项)数字类型;按钮宽度;默认:300
           h: 34,               //(可选项)数字类型;按钮高度;默认:34
           corner:5,              //(可选项)数字类型;按钮圆角;默认:0
           marginB:5,           //(可选项)数字类型;按钮下边距;默认:5
           bg:'#7B68EE',        //(可选项)字符串类型;按钮背景色,支持rgb、rgba()、#、img;默认:#7B68EE
           titleSize:13,        //(可选性)数字类型;按钮标题文本字体大小;默认:12
           titleColor:'#000000',//(可选项)字符串类型;按钮标题文本颜色,支持rgb、rgba、#;默认:#000000
           title:''             //(可选项)字符串类型;按钮标题文本;默认:空 
        } 
     }
}

datas:

  • 类型:数组
  • 描述:选择项数据源
  • 内部字段:
[{
     icon:'',      //字符串:图标路径,要求本地路径(widget://、fs://)
     title:''      //字符串类型;文本内容
},...]

mask:

  • 类型:字符串
  • 描述:(可选项)上部遮罩层配置,支持rgb、rgba、#;
  • 默认:不显示遮罩层

index:

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

animation:

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

callback(ret)

ret:

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

示例代码

var actionDialog = api.require('UIActionDialog');
actionDialog.payFor({
    styles:{
        title:{
            text:'实际支付:',
        },
        content:{
            text:'¥660(需支付:¥670)',
            rich:[{
                range:{start:0,length:1},
                size:9,
                color:'#000000'
            },{
                range:{start:1,length:3},
                size:24,
                color:'#ff0000'
            },{
                range:{start:4,length:12},
                size:9,
                color:'#DCDCDC'
            }]
        },
        item:{
            active:'widget://res/car1.png',
            //inactive:'widget://res/car2.png'
        },
        bottom:{
            button:{
                title:'保存',
            }
        }
    },
    datas:[{
        icon:'widget://res/scroll4.png',
        title:'微信'
    },{
        icon:'widget://res/scroll5.png',
        title:'支付宝'
    }],
    mask:'rgba(0,0,0,0.6)',
    animation: true
},function(ret) {
    console.log(JSON.stringify(ret));
    if (ret.eventType == 'bottom') {
        actionDialog.close();
    } else if (ret.eventType == 'mask') {
        actionDialog.close();
    }
});

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

hide

隐藏对话框 仅支持ios

hide({params})

params

animation:

  • 类型:布尔
  • 描述:(可选项)是否带动画效果(300毫秒)
  • 默认:true

示例代码

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

可用性

iOS

可提供的 1.0.0 及更高版本

show

显示已隐藏的插件 仅支持ios

show({params})

params

animation:

  • 类型:布尔
  • 描述:(可选项)是否带动画效果(300毫秒)
  • 默认:true

示例代码

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

可用性

iOS

可提供的 1.0.0 及更高版本

close

关闭插件(从内存里清除)

close({params})

params

animation:

  • 类型:布尔
  • 描述:(可选项)是否带动画效果(300毫秒)
  • 默认:true

示例代码

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

可用性

iOS,android 系统

可提供的 1.0.0 及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10