全部产品

Tips 引导

Tips引导是特定应用场景下系统针对用户的一种功能引导方式,例如用户第一次登录后、或者某个新功能上线后的提示等。分tips-dialog(对话型)和tips-plain(简单型)两种类型。

说明:

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

扫码体验

image.png

示例代码

{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "tips-dialog": "mini-antui/es/tips/tips-dialog/index",
    "tips-plain": "mini-antui/es/tips/tips-plain/index"
  }
}

<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>

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" time="{{time}}">{{content}}</tips-plain>

Page({
  data: {
    content: '我知道了',
    time: 2000,
  },
  onClose() {
    my.alert({
      title: '12321'
    });
  }
});

属性

tips-dialog

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

slots

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

tips-plain

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