请选择 进入手机版 | 继续访问电脑版
帖子
帖子
用户
博客
课程
显示全部楼层
67
帖子
0
勋章
974
Y币

personalCenter 模块效果展示

[复制链接]
发表于 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://**.**1.z0.glb**.**/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>
复制代码





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

X
2
帖子
0
勋章
75
Y币
在小米note2下,头像上的修改按钮总是存在,未设置modButton,是不是bug
177
帖子
0
勋章
1万+
Y币
2k 发表于 2018-9-19 20:37
在小米note2下,头像上的修改按钮总是存在,未设置modButton,是不是bug

复现代码提供一下,用其他手机试试
7
帖子
0
勋章
3558
Y币
iphone7上显示的那个顶部显示不出来。。。还有我想在下面加东西怎么是加到背后了啊?



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

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

X
19
帖子
0
勋章
966
Y币
支持
0
帖子
0
勋章
3
Y币
打开个人中心之后,怎么关闭? 每个页面都被它覆盖了
5
帖子
0
勋章
28
Y币
这个我本地运行了一下,页面上什么都没有,是我少了什么东西吗?
优秀,赞
您需要登录后才可以回帖 登录

本版积分规则