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

视频演示

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()
  4. // 返回值支持 promise 接口，可以通过 then/promise.then 方法在关闭后运行 callback
  5. hide.then(callback)
  6. hide.promise.then(callback)