|
本帖最后由 uoaccw 于 2018-12-28 21:24 编辑
personalCenter 模块是一个带有图片模糊效果的个人信息展示中心
https://docs.apicloud.com/Client-API/UI-Layout/personalCenter
personalCenter 模块效果展示,如下图。底部三个按钮是传入一个数组控制的,因此数量可以调整。也可以传图片,也可以实现图标加文字的效果。文字颜色,字体大小有对应参数可以调整。
可以监听【修改】和【设置】按钮的点击事件,进行修改图像或打开设置页面的操作。
代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
- <title>开发</title>
- <link rel="stylesheet" type="text/css" href="../css/api.css" />
- <style>
- </style>
- </head>
- <body>
- <script src="./script/api.js"></script>
- <script>
- apiready = function() {
- var personalCenter = api.require('personalCenter');
- personalCenter.open({
- y: 0,
- //h: 3*api.winWidth/4,
- userName: '李白',
- userNameSize: 16,
- userColor: '#ff0',
- subTitle: '诗仙',
- subTitleSize: 14,
- subTitleColor: '#ff0',
- imgPath: 'http://**.**1.z0.glb**.**/apicloud/19a06e4d09d4e1b34740b8b1191c324a.jpg',
- placeholderImg: 'widget://image/personalCenter.jpg',
- btnArray: [{
- bgImg: '',
- selectedImg: '',
- lightImg: '', //(可选项)字符串类型;按钮选中后图片,要求本地路径(widget://、fs://)
- title: '身高', //(可选项)字符串类型;按钮上的标题
- count: '180', //(可选项)字符串类型;按钮上的数据
- titleColor: '#921AFF', //(可选项)字符串类型;按钮上的标题颜色,支持 rgb、rgba、#;默认:#AAAAAA
- titleLightColor: '#921AFF', //(可选项)字符串类型;按钮选中标题的颜色,支持 rgb、rgba、#;默认:#A4D3EE
- countColor: '#921AFF', //(可选项)字符串类型;按钮上数字颜色,支持 rgb、rgba、#;默认:#FFFFFF
- countLightColor: '#921AFF' //(可选项)字符串类型;按钮上数字选中颜色,支持 rgb、rgba、#;默认:#A4D3EE
- }, {
- bgImg: '',
- selectedImg: '',
- title: '星座', //(可选项)字符串类型;按钮上的标题
- count: '双鱼', //(可选项)字符串类型;按钮上的数据
- titleColor: '#921AFF', //(可选项)字符串类型;按钮上的标题颜色,支持 rgb、rgba、#;默认:#AAAAAA
- titleLightColor: '#921AFF', //(可选项)字符串类型;按钮选中标题的颜色,支持 rgb、rgba、#;默认:#A4D3EE
- countColor: '#921AFF', //(可选项)字符串类型;按钮上数字颜色,支持 rgb、rgba、#;默认:#FFFFFF
- countLightColor: '#921AFF' //(可选项)字符串类型;按钮上数字选中颜色,支持 rgb、rgba、#;默认:#A4D3EE
- }, {
- bgImg: '',
- selectedImg: '',
- title: '剑术', //(可选项)字符串类型;按钮上的标题
- count: '90', //(可选项)字符串类型;按钮上的数据
- titleColor: '#921AFF', //(可选项)字符串类型;按钮上的标题颜色,支持 rgb、rgba、#;默认:#AAAAAA
- titleLightColor: '#921AFF', //(可选项)字符串类型;按钮选中标题的颜色,支持 rgb、rgba、#;默认:#A4D3EE
- countColor: '#921AFF', //(可选项)字符串类型;按钮上数字颜色,支持 rgb、rgba、#;默认:#FFFFFF
- countLightColor: '#921AFF' //(可选项)字符串类型;按钮上数字选中颜色,支持 rgb、rgba、#;默认:#A4D3EE
- }]
- }, function(ret, err) {
- if (ret) {
- alert(JSON.stringify(ret));
- } else {
- alert(JSON.stringify(err));
- }
- });
- }
- </script>
- </body>
- </html>
复制代码
|
本帖子中包含更多资源,您需要 登录 才可以下载或查看,没有帐号?立即注册
X
|