UIPersonalCenter

来自于：APICloud立即使用

open updateValue close getSelect setSelect show hide

概述

UIPersonalCenter 是一个带有图片模糊效果的个人信息展示中心，开发者只需配置相关接口参数即可实现一个原生效果的个人展示中心。本模块宽度默认当前设备屏幕宽度。

open

打开个人中心

open({params}, callback(ret))

params

y ：

  • 类型：数字
  • 描述：（可选项）个人中心视图上边距屏幕位置
  • 默认值：0

h ：

  • 类型：数字
  • 描述：（可选项）视图的高，不可小于230
  • 默认值：230

data：

  • 类型：JSON对象
  • 描述：模块数据配置
  • 内部字段：
  1. {
  2.       bg: '',         //字符串类型；背景图片路径，支持http、https、widget、fs协议，模块会对图片缓存处理
  3.       avatar:'',      //（可选项）字符串类型；头像图片路径，支持http、https、widget、fs协议，不传则不显示头像，模块会对图片缓存处理
  4.       title:'',       //（可选项）字符串类型；用户名；不传则不显示
  5.       subtitle:'',    //（可选项）字符串类型；子标题；不传则不显示
  6.       menuAry:[{      //（可选项）数组类型；底部菜单按钮组成的数组，传几个显示几个按钮，宽度平均分，不传则或传空则不显示底部按钮
  7.          title:'',    //（可选项）字符串类型；按钮上的标题不传则不显示
  8.          subtitle:''  //（可选项）字符串类型；子标题，不传则不显示
  9.       }]
  10. }

styles：

  • 类型：JSON对象
  • 描述：模块样式配置
  • 内部字段：
  1. {
  2.       blur: 8,             //（可选项）数字类型；背景毛玻璃模糊度，推荐取值范围1-100；默认：8
  3.       titleColor:'',       //（可选项）字符串类型；标题颜色，支持rgb、rgba、#；默认：#FFFFFF
  4.       titleSize:'',        //（可选项）数字类型；标题大小；默认：13
  5.       subtitleColor:'',    //（可选项）字符串类型；子标题颜色，支持rgb、rgba、#；默认：#FFFFFF
  6.       subtitleSize:'',     //（可选项）数字类型；子标题字体大小；默认：13
  7.       avatar: {            //（可选项）JSON对象；头像样式配置
  8.          size:,            //（可选项）数字类型；头像大小；默认：
  9.          marginTop:        //（可选项）数字类型；上边距；默认：10
  10.       },
  11.       leftBtn: {           //（可选项）JSON对象；左边按钮配置，传空则取默认值
  12.          title:'',         //（可选项）字符串类型；按钮标题；不传则不显示，且icon左右居中显示
  13.          titleSize:,       //（可选项）数字类型；按钮标题字体大小；默认：11
  14.          titleColor:'',    //（可选项）字符串类型；按钮标题颜色，支持rgb、rgba、#；默认：#FFFFFF
  15.          bg:'',            //（可选项）字符串类型；按钮背景图标路径，要求本地路径（widget://、fs://）；不传则不显示
  16.          icon:'',          //（可选项）字符串类型；按钮图标路径，要求本地路径（widget://、fs://）；不传则不显示，且title左右居中显示
  17.          iconSize:,        //（可选项）数字类型；按钮图标大小；默认：13
  18.         size{    
  19.              w:,             //（可选项）数字类型；按钮宽；默认：80
  20.              h:  
  21.             }            //（可选项）数字类型；按钮高；默认：25
  22.          marginLeft:,      //（可选项）数字类型；按钮左边距；默认：20
  23.          marginTop:        //（可选项）数字类型；按钮上边距；默认：10
  24.       },
  25.       rightBtn: {          //（可选项）JSON对象；右边按钮配置，传空则取默认值
  26.          title:'',         //（可选项）字符串类型；按钮标题；不传则不显示，且icon左右居中显示
  27.          titleSize:,       //（可选项）数字类型；按钮标题字体大小；默认：11
  28.          titleColor:'',    //（可选项）字符串类型；按钮标题颜色，支持rgb、rgba、#；默认：#FFFFFF
  29.          bg:'',            //（可选项）字符串类型；按钮背景图标路径，要求本地路径（widget://、fs://）；不传则不显示
  30.          corner:,          //（可选项）数字类型；按钮圆角大小；默认：5
  31.          icon:'',          //（可选项）字符串类型；按钮图标路径，要求本地路径（widget://、fs://）；不传则不显示，且title左右居中显示
  32.          iconSize:,        //（可选项）数字类型；按钮图标大小；默认：13
  33.          size:{
  34.                  w:,             //（可选项）数字类型；按钮宽；默认：80
  35.                  h:   
  36.               },           //（可选项）数字类型；按钮高；默认：25
  37.          marginRight:,     //（可选项）数字类型；按钮左边距；默认：20
  38.          marginTop:        //（可选项）数字类型；按钮上边距；默认：10
  39.       },
  40.       modBtn:{             //（可选项）JSON对象；头像右下角按钮配置，若不传则不显示，传空则取默认值
  41.          size:,            //（可选项）数字类型；按钮大小 ,默认:20
  42.          img:''            //  字符串类型；按钮图片路径；要求本地路径（widget://、fs://）;不传不显示
  43.       },
  44.       menuBtn: {           //（可选项）JSON对象；底部菜单按钮配置
  45.          height: 44,       //（可选项）数字类型；按钮高度
  46.          borderColor:'',   //（可选项）字符串类型；分割线颜色，支持rgb、rgba、#；默认：#ffffff
  47.          titleSize: 16,    //（可选项）数字类型；按钮标题大小；默认：16
  48.          subtitleSize: 13, //（可选项）数字类型；按钮子标题大小；默认：13
  49.          normal: {         //（可选项）JSON对象；按钮常态样式配置
  50.            bg: '',         //（可选项）字符串类型；按钮背景色，支持rgb、rgba、#；默认：#636363
  51.            titleColor:'',  //（可选项）字符串类型；标题色，支持rgb、rgba、#；默认：#ffffff
  52.            subtitleColor:''//（可选项）字符串类型；子标题色，支持rgb、rgba、#；默认：#ffffff
  53.          },
  54.          selected: {       //（可选项）JSON对象；按钮选中后的样式配置
  55.            bg: '',         //（可选项）字符串类型；按钮背景色，支持rgb、rgba、#；默认：#48D1CC
  56.            titleColor:'',  //（可选项）字符串类型；标题色，支持rgb、rgba、#；默认：#87CEFA
  57.            subtitleColor:''//（可选项）字符串类型；子标题色，支持rgb、rgba、#；默认：#87CEFA
  58.          },
  59.          highlight: {      //（可选项）JSON对象；按钮高亮的样式配置
  60.            bg: ''          //（可选项）字符串类型；按钮背景色，支持rgb、rgba、#；默认：#48D1CC
  61.          },
  62.          pointer: {        //（可选项）JSON对象；按钮下边游标指针配置，若不传则不显示，游标指针为等边三角形，其大小计入模块总高度
  63.             size: 6,       //（可选项）数字类型；游标指针大小；默认：6 大小不得大于12
  64.             color: ''      //（可选项）字符串类型；游标指针背景色，支持rgb、rgba、#；默认：#48D1CC
  65.          }
  66.       }
  67. }

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）模块是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret)

ret:

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType:'show',    //字符串类型；交互事件类型，取值范围如下：
  3.                          //leftBtn：点击左上角按钮事件
  4.                          //rightBtn：点击右上角按钮事件
  5.                          //modBtn：点击头像上修改按钮事件
  6.                          //menu：点击底部菜单按钮事件
  7.     index:0              //数字类型；底部菜单按钮索引，仅当 eventType 为 menu 时有值
  8. }

示例代码

  2.    var UIPersonalCenter = api.require('UIPersonalCenter');
  3.     UIPersonalCenter.open({
  4.            y : 0,
  5.            h:230,
  6.            data:{
  7.                 bg: 'widget://image/timg.png',
  8.                 avatar:'widget://image/timg.png',
  9.                 title:'夜阑',
  10.                 subtitle:'听风雨',
  11.                    menuAry:[{
  12.                          title:'铁马',
  13.                          subtitle:'冰河'
  14.                                },{
  15.                          title:'草地',
  16.                          subtitle:'月光'
  17.                                 },{
  18.                          title:'锄禾',
  19.                          subtitle:'旱地'
  20.                                  }]
  21.                   },
  22.           styles:{
  23.                 blur: 8,
  24.                 titleColor:'#FFFFFF',
  25.                 titleSize:10,
  26.                 subtitleColor:'#F00',
  27.                 subtitleSize:8,
  28.                 avatar:{
  29.                     size:120,
  30.                     marginTop:10,
  31.                  },
  32.                 leftBtn:{
  33.                    title:'银河',
  34.                    titleSize:10,
  35.                    titleColor:'#f00',
  36.                    bg:'widget://image/timg.png',
  37.                    corner:5,
  38.                    icon:'widget://res/emotion/Expression_6.png',
  39.                    iconSize:20,
  40.                    size:{
  41.                        w:50,
  42.                        h:20,
  43.                         },
  44.                    marginLeft:20,
  45.                    marginTop:10,
  46.                        },
  47.                rightBtn: {
  48.                    title:'玉楼',
  49.                    titleSize:11,
  50.                    titleColor:'#F00',
  51.                    bg:'#FFFFFF',
  52.                    corner:5,
  53.                    icon:'widget://res/emotion/Expression_4.png',
  54.                    iconSize:20,
  55.                    size: {
  56.                      w:50,
  57.                      h:20
  58.                       },
  59.                    marginRight:20,
  60.                    marginTop: 10,
  61.                        },
  62.                    modBtn:{
  63.                       size:30,
  64.                       img:'widget://res/emotion/Expression_5.png'
  65.                      },
  66.                    menuBtn: {
  67.                      height: 44,
  68.                      borderColor:'#F00',
  69.                      titleSize: 16,
  70.                      subtitleSize: 13,
  71.                      normal: {
  72.                            bg: '#4169E1',
  73.                            titleColor:'#ffffff',
  74.                            subtitleColor:'#f00'
  75.                               },
  76.                      selected: {
  77.                            bg: '#FFFFFF',
  78.                            titleColor:'#87CEFA',
  79.                            subtitleColor:'#87CEFA'
  80.                               },
  81.                      highlight: {
  82.                            bg: 'rgba(0,0,0,1)'
  83.                                   },
  84.                      pointer: {
  85.                            size: 6,
  86.                            color: '#f00'
  87.                                },
  88.                                   },
  89.                                   }
  90.             }, function(ret, err) {
  91.               if (ret) {
  92.                    alert(JSON.stringify(ret));
  93.                         } else {
  94.                    alert(JSON.stringify(err));
  95.                          }
  96.                            });

可用性

iOS、Android系统

可提供的1.0.0及更高版本

updateValue

刷新个人中心显示数据

updateValue({params})

params

data：

  • 类型：JSON对象
  • 描述：模块数据配置
  • 内部字段：
  1. {
  2.       bg: '',         //（可选项）字符串类型；背景图片路径，支持http、https、widget、fs协议，模块会对图片缓存处理,不传不更新
  3.       avatar:'',      //（可选项）字符串类型；头像图片路径，支持http、https、widget、fs协议，不传则不显示头像，模块会对图片缓存处理,不传不更新
  4.       title:'',       //（可选项）字符串类型；用户名；不传不更新
  5.       subtitle:'',    //（可选项）字符串类型；子标题；不传不更新
  6.       menuAry:[{      //（可选项）数组类型；,不传不更新
  7.          title:'',    //（可选项）字符串类型；标题，不传不更新
  8.          subtitle:''  //（可选项）字符串类型；子标题，不传不更新
  9.       }]
  10. }

示例代码

  2. var UIPersonalCenter = api.require('UIPersonalCenter');
  3.     UIPersonalCenter.updateValue({
  4.        data:{
  5.            bg: 'widget://image/head.jpg',    
  6.            avatar:'http://img.zcool.cn/community/010f87596f13e6a8012193a363df45.jpg@1280w_1l_2o_100sh.jpg', 
  7.            title:'柚子科技',
  8.            subtitle:'哈哈哈',
  9.            menuAry:[{     
  10.                 subtitle:'123',  
  11.                 title:'1' 
  12.                      },{
  13.                 title:'2',
  14.                   subtitle: '456'
  15.                       },{
  16.                  title:'7',
  17.                   subtitle: '363'
  19.                  }]
  20.                     }
  21.                  });

可用性

iOS、Android系统

可提供的1.0.0及更高版本

close

关闭个人中心

close()

示例代码

  1. var UIPersonalCenter = api.require('UIPersonalCenter');
  2. UIPersonalCenter.close();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

getSelect

获取选中按钮

getSelect(callback(ret))

callback(ret)

ret:

  • 类型：JSON 对象
  • 内部字段：
  1. { 
  2.     index:0    //数字类型；当前选中项的索引
  3. }

示例代码

  1. var UIPersonalCenter = api.require('UIPersonalCenter');
  2. UIPersonalCenter.getSelect(function(ret){
  3.     console.log(ret.index);
  4. });

可用性

iOS、Android系统

可提供的1.0.0及更高版本

setSelect

设置选中按钮

setSelect({params})

params

index：

  • 类型：数字
  • 描述：（可选项）底部菜单按钮选中项的索引

  • 默认值：0

    示例代码

  1. var UIPersonalCenter = api.require('UIPersonalCenter');
  2. UIPersonalCenter.setSelect({
  3.     index: 1
  4. });

可用性

iOS、Android系统

可提供的1.0.0及更高版本

show

显示个人中心

show()

示例代码

  1. var UIPersonalCenter = api.require('UIPersonalCenter');
  2. UIPersonalCenter.show();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

hide

隐藏个人中心

hide()

示例代码

  1. var UIPersonalCenter = api.require('UIPersonalCenter');
  2. UIPersonalCenter.hide();

补充说明

隐藏个人中心，并没有从内存里清除

可用性

iOS、Android系统

可提供的1.0.0及更高版本