支付宝小程序引导组件 引导·Tips

小提示。分tips-dialog（对话型）和tips-plain（简单型）两种类型。

说明：

• 仅用于 UI 展示没有对应的业务逻辑功能。
• 收藏引导 tips 不针对小程序，只针对用户，用户见到第一次引导收藏 tips 之后，所有小程序都将对该用户隐藏引导收藏的 tips。

扫码体验

示例代码

{
 "defaultTitle": "Tips",
 "usingComponents": {
   "tips-dialog": "mini-ali-ui/es/tips/tips-dialog/index",
   "tips-plain": "mini-ali-ui/es/tips/tips-plain/index"
 }
}

tips-dialog

<view>
 <tips-dialog
   show="{{showDialog}}"
   className="dialog"
   type="dialog"
 >
   <view class="content" slot="content">
     <view>hello,</view>
     <view>欢迎使用小程序扩展组件库mini-ali-ui</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>
Page({
 data: {
   showRectangle: true,
   showDialog: true,
 },
 onCloseTap() {
   this.setData({
     showRectangle: false,
   });
 },
 onRectangleTap() {
   my.alert({
     content: 'do something',
   });
 },
 onDialogTap() {
   this.setData({
     showDialog: false,
   });
 },
});
.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

<tips-plain onClose="onClose" onTimeOut="onTimeOut" time="{{time}}">{{content}}</tips-plain>
Page({
  data: {
    content: '我知道了(2秒后消失)',
    time: 2000,
  },
  onClose() {
    my.alert({
      title: '主动关闭 tips',
    });
  },
  onTimeOut() {
    my.alert({
      title: '时间到了，关闭 tips',
    });
  },
});

属性

tips-dialog

属性	类型	默认值	说明	必填
className	String	-	自定义 class。	否
show	Boolean	true	控制组件是否展示。	否
type	String	dialog	dialog 表示对话框的样式类型，rectangle 表示矩形的样式类型。	否
onCloseTap	()=> void	-	当 type 值为 rectangle 时，组件点击关闭 icon 的回调。	否
iconUrl	String	-	展示 icon 的 url 地址。	否
arrowPosition	String	bottom-left	控制 tips 中的箭头位置。可选值：bottom-left、bottom-center、bottom-right、top-left、top-center、top-right、left、right。	否

slots

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

tips-plain

属性	类型	必填	描述	默认值	最低版本
className	String	false	自定义 class。	-	-
time	Number	false	自动关闭时间（单位：毫秒）。	5000(ms)	-
onClose	() => void	false	回调并关闭提示框。	-	-
onTimeOut	() => void	false	倒计时结束时关闭回调	-	1.0.11