Notification 通知

用于展现通知提示框,在窗口顶部显示。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Notification",
  3. "usingComponents": {
  4. "wux-button": "../../dist/button/index",
  5. "wux-notification": "../../dist/notification/index"
  6. }
  7. }

示例

!> 该组件主要依靠 JavaScript 主动调用,所以一般只需在 wxml 中添加一个组件,并设置 id 为 #wux-notification 或其他,之后在 page.js 中调用 $wuxNotification(id) 获取匹配到的第一个组件实例对象。

  1. <wux-notification id="wux-notification" />
  2. <view class="page">
  3. <view class="page__hd">
  4. <view class="page__title">Notification</view>
  5. <view class="page__desc">通知</view>
  6. </view>
  7. <view class="page__bd page__bd_spacing">
  8. <wux-button block type="light" bind:click="showNotification">Show Notification</wux-button>
  9. <wux-button block type="light" bind:click="closeNotification">Close Notification</wux-button>
  10. <wux-button block type="light" bind:click="showNotificationReturn">Use return value to close</wux-button>
  11. <wux-button block type="light" bind:click="showNotificationPromise">Use promise to know when closed</wux-button>
  12. </view>
  13. </view>
  1. import { $wuxNotification } from '../../dist/index'
  2. Page({
  3. data: {},
  4. onLoad() {},
  5. showNotification() {
  6. this.closeNotification = $wuxNotification().show({
  7. image: 'https://wux.cdn.cloverstd.com/logo.png',
  8. title: '宝宝',
  9. text: '嘤嘤嘤,人家拿小拳拳捶你胸口!!!',
  10. data: {
  11. message: '逗你玩的!!!'
  12. },
  13. duration: 3000,
  14. onClick(data) {
  15. console.log(data)
  16. },
  17. onClose(data) {
  18. console.log(data)
  19. },
  20. })
  21. },
  22. showNotificationReturn() {
  23. if (this.timeout) clearTimeout(this.timeout)
  24. const hide = $wuxNotification().show({
  25. image: 'https://wux.cdn.cloverstd.com/logo.png',
  26. title: '宝宝',
  27. text: '嘤嘤嘤,人家拿小拳拳捶你胸口!!!',
  28. data: {
  29. message: '逗你玩的!!!'
  30. },
  31. duration: 3000,
  32. })
  33. this.timeout = setTimeout(hide, 1000)
  34. },
  35. showNotificationPromise() {
  36. const hide = $wuxNotification().show({
  37. image: 'https://wux.cdn.cloverstd.com/logo.png',
  38. title: '宝宝',
  39. text: '嘤嘤嘤,人家拿小拳拳捶你胸口!!!',
  40. data: {
  41. message: '逗你玩的!!!'
  42. },
  43. duration: 3000,
  44. })
  45. // hide.promise.then(() => console.log('success'))
  46. hide.then(() => console.log('success'))
  47. },
  48. })

视频演示

Notification

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-notification
options.classNames any 过渡的类名,更多内置过渡效果请参考 AnimationGroup wux-animate—slideInDown
options.image string 通知的图标 -
options.title string 通知的标题 -
options.text string 通知的文本 -
options.duration number 多少毫秒后消失 3000
options.data any 自定义数据传给 onClick、onClose -
options.onClick function 点击后的回调函数 -
options.onClose function 消失后的回调函数 -

Notification.method

  • Notification.show
  • Notification.hide

Notification.show 函数调用后,会返回一个引用,可以通过该引用手动关闭组件

  1. const hide = Notification.show()
  2. hide()
  3. // 返回值支持 promise 接口,可以通过 then/promise.then 方法在关闭后运行 callback
  4. hide.then(callback)
  5. hide.promise.then(callback)