apicloud apicloud

注册
查看: 993|回复: 8

[模块教程] UIAlert - 霸气的对话框

主题:
61
帖子:
36455
云币:
17119

[模块教程] UIAlert - 霸气的对话框

993 8 | 发表于 2019-7-31 17:33:57 |阅读模式 | |
UIAlert 模块封装了一些目前在 android & ios平台比较流行的对话框。
接口还在补充中。


文档地址:
https://docs.apicloud.com/Client-API/UI-Layout/UIAlert

效果图:



提醒1:图标可用2倍图,避免高清屏幕图片有锯齿。
提醒2:添加模块,编译自定义loader测试。
  1. var UIAlert = api.require('UIAlert');
  2.         UIAlert.invite({
  3.             data: {
  4.                 avator: 'widget://image/account.png',
  5.                 name: 'Jack Ma Ma MA',
  6.                 title: '高级上尉王者荣耀',
  7.                 description: '向你发起挑战……',
  8.                 duration: 15000, //单位ms
  9.                 tips: '倒计时结束...',
  10.                 leftBtnTitle: '拒绝',
  11.                 rightBtnTitle: '接受'
  12.             },
  13.             styles: {
  14.                 w: 340,
  15.                 h: 400,
  16.                 bgColor: '#FFF',
  17.                 avator: {
  18.                     size: 45,
  19.                     marginTop: 30,
  20.                 },
  21.                 name: {
  22.                     size: 14,
  23.                     color: '#1C86EE',
  24.                     marginTop: 5
  25.                 },
  26.                 title: {
  27.                     size: 20,
  28.                     color: '#4F4F4F',
  29.                     marginTop: 10,
  30.                 },
  31.                 description: {
  32.                     size: 20,
  33.                     color: '#000',
  34.                     marginTop: 10,
  35.                 },
  36.                 timer: {
  37.                     size: 100,
  38.                     progressNormalColor: '#EEEE00', //蓝色
  39.                     progressHightlightColor: '#DC143C', //灰色
  40.                     marginTop: 20,
  41.                 },
  42.                 tips: {
  43.                     size: 14,
  44.                     color: '#1C86EE',
  45.                     marginTop: 10
  46.                 },
  47.                 leftBtn: {
  48.                     w: 60,
  49.                     h: 40,
  50.                     color: '#FFF',
  51.                     size: 12,
  52.                     corner: 5,
  53.                     bgColor: '#DC143C'
  54.                 },
  55.                 rightBtn: {
  56.                     w: 60,
  57.                     h: 40,
  58.                     color: '#FFF',
  59.                     size: 12,
  60.                     corner: 5,
  61.                     bgColor: '#1C86EE',
  62.                     marginLeft: 40
  63.                 }
  64.             }
  65.         }, function(ret) {
  66.             alert(JSON.stringify(ret));
  67.         });
复制代码


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

官方版主

UID:791056

主题:
9
帖子:
17949
云币:
5594
发表于 2019-7-31 17:35:44 |
嘴强王者

主题:
1
帖子:
81
云币:
2
发表于 2019-7-31 18:49:07 |
很好支持下谢谢

版主

UID:108295

主题:
85
帖子:
4901
云币:
1672

足球狗

发表于 2019-7-31 21:45:18 |
这个对话框有点小复杂哦。

主题:
2
帖子:
117
云币:
2084
发表于 2019-7-31 21:52:15 |
厉害厉害 感谢分享

版主

UID:546828

主题:
34
帖子:
4263
云币:
3058

圣诞节捣蛋鬼APICloud五岁啦

发表于 2019-8-1 09:56:46 |
支持支持

主题:
2
帖子:
18
云币:
41
发表于 2019-11-12 17:19:53 |
支持下

驾校小白

UID:878544

主题:
3
帖子:
8
云币:
12
发表于 2020-8-3 15:59:05 |
支持

驾校小白

UID:77949

主题:
0
帖子:
13
云币:
0
发表于 2020-8-17 10:21:21 |
这个好像有别的模块有冲突
您需要登录后才可以回帖 登录 | 立即注册

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