water_xcx/miniprogram_npm/tdesign-miniprogram/notice-bar
Cc a25b49fd6d 初始化:小程序同步 2025-04-15 15:44:51 +08:00
..
README.md 初始化:小程序同步 2025-04-15 15:44:51 +08:00
notice-bar.d.ts 初始化:小程序同步 2025-04-15 15:44:51 +08:00
notice-bar.js 初始化:小程序同步 2025-04-15 15:44:51 +08:00
notice-bar.json 初始化:小程序同步 2025-04-15 15:44:51 +08:00
notice-bar.wxml 初始化:小程序同步 2025-04-15 15:44:51 +08:00
notice-bar.wxss 初始化:小程序同步 2025-04-15 15:44:51 +08:00
props.d.ts 初始化:小程序同步 2025-04-15 15:44:51 +08:00
props.js 初始化:小程序同步 2025-04-15 15:44:51 +08:00
type.d.ts 初始化:小程序同步 2025-04-15 15:44:51 +08:00
type.js 初始化:小程序同步 2025-04-15 15:44:51 +08:00

README.md

title description spline isComponent
NoticeBar 消息通知 在导航栏下方,用于给用户显示提示消息。 message true

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
}

代码演示

基础静态公告栏

{{ base }}

带图标静态公告栏

{{ iconDemo }}

带操作公告栏

{{ event }}

滚动公告栏

{{ scrolling }}

自定义样式

{{ custom }}

不同状态的公告栏

公告栏类型有普通info、警示warning、成功success、错误error

{{ theme }}

多行文字消息栏

{{ customization }}

API

NoticeBar Props

名称 类型 默认值 说明 必传
external-classes Array - 组件类名,分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。['t-class', 't-class-content', 't-class-prefix-icon', 't-class-extra', 't-class-suffix-icon'] N
content String / Slot - 文本内容 N
extra String / Slot - 右侧额外信息 N
marquee Boolean / Object false 跑马灯效果。speed 指速度控制loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放delay 表示延迟多久开始播放。TS 类型:`boolean DrawMarquee interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。详细类型定义
prefix-icon String - 左边图标 N
suffix-icon String - 后缀图标 N
theme String info 内置主题。可选项info/success/warning/error N
visible Boolean false 显示/隐藏 N

NoticeBar Events

名称 参数 描述
click trigger: NoticeBarTrigger) 点击事件。详细类型定义
`type NoticeBarTrigger = 'prefix-icon'