注意：以下文档只适用于TOP接口，请谨慎使用！

文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

Tips 引导

更新时间：2020/06/24 访问次数：2442

小提示。分tips-dialog和tips-plain两种类型。

 

tips-dialog

属性 说明 类型 默认值 必选
className 自定义class String   false
show 控制组件是否展示 Boolean true false
type dialog表示对话框的样式类型，rectangle表示矩形的样式类型。 String dialog false
onCloseTap 当type值为rectangle时，组件点击关闭icon的回调 () => void   false
iconUrl 展示icon的url地址 String   false

 

slots

slotName 说明
content 用于渲染提示的正文内容
operation 用于渲染右侧操作区域

 

tips-plain

属性 说明 类型 默认值 必选
className 自定义class String   false
time 自动关闭时间(单位毫秒) Number 5000(ms) false
onClose 回调并关闭提示框 () => void   false

  

Demo示例

 

示例

 

1
2
3
4
5
6
7
{
  "defaultTitle": "应用AntUI组件库",
  "usingComponents": {
    "tips-dialog": "mini-antui/es/tips/tips-dialog/index",
    "tips-plain": "mini-antui/es/tips/tips-plain/index"
  }
}

 

tips-dialog

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<view>
  <tips-dialog
    show="{{showDialog}}"
    className="dialog"
    type="dialog"
  >
    <view class="content" slot="content">
      <view>hello,</view>
      <view>欢迎使用应用扩展组件库mini-antui</view>
    </view>
    <view slot="operation" class="opt-button" onTap="onDialogTap">知道了</view>
  </tips-dialog>
  <tips-dialog
    iconUrl="https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.png"
    type="rectangle"
    className="rectangle"
    onCloseTap="onCloseTap"
    show="{{showRectangle}}">
    <view class="content" slot="content">
      把“城市服务”添加到首页
    </view>
    <view slot="operation" class="add-home" onTap="onRectangleTap">立即添加</view>
  </tips-dialog>
</view>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Page({
  data: {
    showRectangle: true,
    showDialog: true,
  },
  onCloseTap() {
    this.setData({
      showRectangle: false,
    });
  },
  onRectangleTap() {
    my.alert({
      content: 'do something',
    });
  },
  onDialogTap() {
    this.setData({
      showDialog: false,
    });
  },
});

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.rectangle {
  position: fixed;
  bottom: 100px;
}
 
.dialog {
  position: fixed;
  bottom: 10px;
}
 
.content {
  font-size: 14px;
  color: #fff;
}
 
.opt-button {
  width: 51px;
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  border: #68BAF7 solid 1rpx;
}
 
.add-home {
  width: 72px;
  height: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #56ADEB;
  color: #fff;
  font-size: 14px;
}

 

tips-plain

 

1
<tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>

 

1
2
3
4
5
6
7
8
9
10
11
Page({
  data: {
    content: '我知道了',
    time: 2000,
  },
  onClose() {
    my.alert({
      title: '12321'
    });
  }
});

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部

阿里巴巴集团|淘宝网|天猫|聚划算|全球速卖通|阿里巴巴国际交易市场|1688|阿里妈妈|阿里旅行 · 去啊|阿里云计算|YunOS|阿里通信|万网|高德|UC|友盟+

虾米|天天动听|来往|钉钉|支付宝

© 2009-2017 Aliyun.com 版权所有 ICP证：浙B2-20080101售前咨询 技术支持官方微博