apicloud apicloud

注册
查看: 1913|回复: 4

[模块教程] personalCenter 模块效果展示

实习司机

UID:253705

主题:
53
帖子:
175
云币:
498

[模块教程] personalCenter 模块效果展示

1913 4 | 发表于 2018-8-4 13:28:58 |阅读模式 | |
本帖最后由 uoaccw 于 2018-12-28 21:24 编辑

personalCenter 模块是一个带有图片模糊效果的个人信息展示中心
https://docs.apicloud.com/Client-API/UI-Layout/personalCenter

personalCenter 模块效果展示,如下图。底部三个按钮是传入一个数组控制的,因此数量可以调整。也可以传图片,也可以实现图标加文字的效果。文字颜色,字体大小有对应参数可以调整。
可以监听【修改】和【设置】按钮的点击事件,进行修改图像或打开设置页面的操作。



代码:
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <title>开发</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.     <style>

  9.     </style>
  10. </head>

  11. <body>

  12.     <script src="./script/api.js"></script>
  13.     <script>
  14.         apiready = function() {
  15.             var personalCenter = api.require('personalCenter');
  16.             personalCenter.open({
  17.                 y: 0,
  18.                 //h: 3*api.winWidth/4,
  19.                 userName: '李白',
  20.                 userNameSize: 16,
  21.                 userColor: '#ff0',
  22.                 subTitle: '诗仙',
  23.                 subTitleSize: 14,
  24.                 subTitleColor: '#ff0',
  25.                 imgPath: 'http://7z08nd.com1.z0.glb.clouddn.com/apicloud/19a06e4d09d4e1b34740b8b1191c324a.jpg',
  26.                 placeholderImg: 'widget://image/personalCenter.jpg',
  27.                 btnArray: [{
  28.                     bgImg: '',
  29.                     selectedImg: '',
  30.                     lightImg: '', //(可选项)字符串类型;按钮选中后图片,要求本地路径(widget://、fs://)
  31.                     title: '身高', //(可选项)字符串类型;按钮上的标题
  32.                     count: '180', //(可选项)字符串类型;按钮上的数据
  33.                     titleColor: '#921AFF', //(可选项)字符串类型;按钮上的标题颜色,支持 rgb、rgba、#;默认:#AAAAAA
  34.                     titleLightColor: '#921AFF', //(可选项)字符串类型;按钮选中标题的颜色,支持 rgb、rgba、#;默认:#A4D3EE
  35.                     countColor: '#921AFF', //(可选项)字符串类型;按钮上数字颜色,支持 rgb、rgba、#;默认:#FFFFFF
  36.                     countLightColor: '#921AFF' //(可选项)字符串类型;按钮上数字选中颜色,支持 rgb、rgba、#;默认:#A4D3EE
  37.                 }, {
  38.                     bgImg: '',
  39.                     selectedImg: '',
  40.                     title: '星座', //(可选项)字符串类型;按钮上的标题
  41.                     count: '双鱼', //(可选项)字符串类型;按钮上的数据
  42.                     titleColor: '#921AFF', //(可选项)字符串类型;按钮上的标题颜色,支持 rgb、rgba、#;默认:#AAAAAA
  43.                     titleLightColor: '#921AFF', //(可选项)字符串类型;按钮选中标题的颜色,支持 rgb、rgba、#;默认:#A4D3EE
  44.                     countColor: '#921AFF', //(可选项)字符串类型;按钮上数字颜色,支持 rgb、rgba、#;默认:#FFFFFF
  45.                     countLightColor: '#921AFF' //(可选项)字符串类型;按钮上数字选中颜色,支持 rgb、rgba、#;默认:#A4D3EE
  46.                 }, {
  47.                     bgImg: '',
  48.                     selectedImg: '',
  49.                     title: '剑术', //(可选项)字符串类型;按钮上的标题
  50.                     count: '90', //(可选项)字符串类型;按钮上的数据
  51.                     titleColor: '#921AFF', //(可选项)字符串类型;按钮上的标题颜色,支持 rgb、rgba、#;默认:#AAAAAA
  52.                     titleLightColor: '#921AFF', //(可选项)字符串类型;按钮选中标题的颜色,支持 rgb、rgba、#;默认:#A4D3EE
  53.                     countColor: '#921AFF', //(可选项)字符串类型;按钮上数字颜色,支持 rgb、rgba、#;默认:#FFFFFF
  54.                     countLightColor: '#921AFF' //(可选项)字符串类型;按钮上数字选中颜色,支持 rgb、rgba、#;默认:#A4D3EE
  55.                 }]
  56.             }, function(ret, err) {
  57.                 if (ret) {
  58.                     alert(JSON.stringify(ret));
  59.                 } else {
  60.                     alert(JSON.stringify(err));
  61.                 }
  62.             });
  63.         }
  64.     </script>
  65. </body>

  66. </html>
复制代码





本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

萌萌的小学生

UID:563883

主题:
2
帖子:
3
云币:
75
发表于 2018-9-19 20:37:22 |
在小米note2下,头像上的修改按钮总是存在,未设置modButton,是不是bug

老司机

UID:253706

主题:
177
帖子:
16969
云币:
8001
发表于 2018-9-19 23:46:28 |
2k 发表于 2018-9-19 20:37
在小米note2下,头像上的修改按钮总是存在,未设置modButton,是不是bug

复现代码提供一下,用其他手机试试

新手上路

UID:152653

主题:
7
帖子:
19
云币:
3539
发表于 2018-11-22 15:59:00 |
iphone7上显示的那个顶部显示不出来。。。还有我想在下面加东西怎么是加到背后了啊?



我想做列表页的第二张图片里的样式。。但是不知道下面那块怎么添加上去的。
不会是用position:absoulte,top:400, 这样的绝对定位一块一块的布局给定位上去的吧。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

实习司机

UID:194062

主题:
13
帖子:
55
云币:
544
发表于 2019-8-21 00:02:04 |
支持
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表