Toptips

Toptips顶部错误提示组件,常用于表单校验或提交请求到后台成功或失败的错误提示,如下图所示。

Toptips - 图1

引入组件

在 page.json 中引入组件

  1. {
  2. "usingComponents": {
  3. "mp-toptips": "weui-miniprogram/toptips/toptips"
  4. }
  5. }

示例代码

  1. <!--WXML示例代码-->
  2. <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
  1. // page.js示例代码
  2. Page({
  3. data: {
  4. error: ''
  5. },
  6. onShow() {
  7. this.setData({
  8. error: '这是一个错误提示'
  9. })
  10. }
  11. });

属性列表

属性类型默认值必填说明
ext-classstring添加在组件内部结构的class,可用于修改组件内部的样式
typestring提示类型,可以为info、error、success,表示三种提示颜色
showbooleanfalse是否显示Toptips
msgstring提示内容
delaynumber2000提示内容显示后隐藏的ms值
bindhideeventhandler顶部提示隐藏的时候触发的事件