Toptips 顶部提示

用于展现简短的提示信息，在窗口顶部显示。

使用指南

在 page.json 中引入组件

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

示例

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

  1. <wux-toptips id="wux-toptips" />
  3. <view class="page">
  4.     <view class="page__hd">
  5.         <view class="page__title">Toptips</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="showToptips1">Show</wux-button>
  10.         <wux-button block type="light" bind:click="showToptips2">Success</wux-button>
  11.         <wux-button block type="light" bind:click="showToptips3">Info</wux-button>
  12.         <wux-button block type="light" bind:click="showToptips4">Warn</wux-button>
  13.         <wux-button block type="light" bind:click="showToptips5">Error</wux-button>
  14.         <wux-button block type="light" bind:click="showToptips6">Use return value to close</wux-button>
  15.         <wux-button block type="light" bind:click="showToptips7">Use promise to know when closed</wux-button>
  16.     </view>
  17. </view>
  1. import { $wuxToptips } from '../../dist/index'
  3. Page({
  4.     showToptips1() {
  5.         $wuxToptips().show({
  6.             icon: 'cancel',
  7.             hidden: false,
  8.             text: 'Toptips Title',
  9.             duration: 3000,
  10.             success() {},
  11.         })
  12.     },
  13.     showToptips2() {
  14.         $wuxToptips().success({
  15.             hidden: false,
  16.             text: 'Toptips Title',
  17.             duration: 3000,
  18.             success() {},
  19.         })
  20.     },
  21.     showToptips3() {
  22.         $wuxToptips().info({
  23.             hidden: false,
  24.             text: 'Toptips Title',
  25.             duration: 3000,
  26.             success() {},
  27.         })
  28.     },
  29.     showToptips4() {
  30.         $wuxToptips().warn({
  31.             hidden: false,
  32.             text: 'Toptips Title',
  33.             duration: 3000,
  34.             success() {},
  35.         })
  36.     },
  37.     showToptips5() {
  38.         $wuxToptips().error({
  39.             hidden: false,
  40.             text: 'Toptips Title',
  41.             duration: 3000,
  42.             success() {},
  43.         })
  44.     },
  45.     showToptips6() {
  46.         if (this.timeout) clearTimeout(this.timeout)
  48.         const hide = $wuxToptips().show({
  49.             icon: 'cancel',
  50.             hidden: false,
  51.             text: 'Toptips Title',
  52.             duration: 3000,
  53.         })
  55.         this.timeout = setTimeout(hide, 1000)
  56.     },
  57.     showToptips7() {
  58.         const hide = $wuxToptips().show({
  59.             icon: 'cancel',
  60.             hidden: false,
  61.             text: 'Toptips Title',
  62.             duration: 3000,
  63.         })
  65.         // hide.promise.then(() => console.log('success'))
  66.         hide.then(() => console.log('success'))
  67.     },
  68. })

视频演示

Toptips

API

参数 类型 描述 默认值
options object 配置项 -
options.prefixCls string 自定义类名前缀 wux-toptips
options.classNames any 过渡的类名，更多内置过渡效果请参考 AnimationGroup wux-animate—slideInDown
options.icon string 图标类型 cancel
options.hidden boolean 是否隐藏图标 false
options.text string 报错文本 -
options.duration number 多少毫秒后消失 3000
options.success function 消失后的回调函数 -

Toptips.method

  • Toptips.show
  • Toptips.success
  • Toptips.info
  • Toptips.warn
  • Toptips.error

以上函数调用后，会返回一个引用，可以通过该引用手动关闭组件

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