小程序开发框架

# 介绍

用于循环播放展示一组消息通知。

# 引入

在app.json或index.json中引入组件，详细介绍见快速上手

"usingComponents": {
  "mx-notice-bar": "/miniprogram_npm/m-ui/mx-notice-bar/index",
}

# 小程序码

可使用微信扫码查看小程序码

#

# 代码演示

# 基本用法

<mx-notice-bar
  class-prefix="mx-iconfont"
  left-icon="tip"
  color="#FFAA10 "
  background="#FFF6E7"
  text="提示：滤芯剩余不足，请尽快更换。"
/>

# 滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
<mx-notice-bar
  class-prefix="mx-iconfont"
  left-icon="tip"
  color="#FFAA10 "
  background="#FFF6E7"
  scrollable
  text="提示：滤芯剩余不足，请尽快更换。"
/>

# 多行展示

文本过长，可以通过设置 wrapable 属性来开启多行展示。

<mx-notice-bar
  wrapable
  class-prefix="mx-iconfont"
  left-icon="tip"
  color="#FFAA10 "
  background="#FFF6E7"
  mode="closeable"
  text="提示：滤芯剩余不足，请尽快更换。提示注意事项，文案自定"
/>

# 带按钮样式

点击按钮，联系售后

<mx-notice-bar
  class-prefix="mx-iconfont"
  left-icon="tip"
  clickButton="{{ true }}"
  bind:button="postSale"
  color="#FFAA10 "
  background="#FFF6E7"
  scrollable="{{ false }}"
  text="提示：滤芯剩余不足，请尽快更换。"
/>

postSale() {
    wx.showToast({
      title: '联系售后',
      duration: 1000,
      })
  },

# 通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->
<mx-notice-bar
  class-prefix="mx-iconfont"
  left-icon="tip"
  color="#FFAA10 "
  background="#FFF6E7"
  scrollable="{{ false }}"
  mode="closeable"
  text="提示：滤芯剩余不足，请尽快更换。"
/>

<!-- link 模式，在右侧显示链接箭头 -->
<mx-notice-bar
  class-prefix="mx-iconfont"
  left-icon="tip"
  color="#FFAA10 "
  background="#FFF6E7"
  scrollable="{{ false }}"
  mode="link"
  text="提示：滤芯剩余不足，请尽快更换。"
/>

# 自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<mx-notice-bar
  class-prefix="mx-iconfont"
  left-icon="tip"
  clickButton="{{ true }}"
  bind:button="postSale"
  color="#FFAA10 "
  background="#FFF6E7"
  scrollable="{{ false }}"
  text="提示：滤芯剩余不足，请尽快更换。"
/>

# API

# Props

参数 说明 类型 默认值
class-prefix 可选值 mx-iconfont string -
left-icon 图片链接或图标可选值（可选值 tip） string -
mode 通知栏模式，可选值为 closeable link string -
text 通知文本内容 string ''
color 通知文本颜色 string -
background 滚动条背景 string -
scrollable 是否开启滚动播放，内容长度溢出时默认开启 boolean -
wrapable 是否开启文本换行，只在禁用滚动时生效 string ''
clickButton 是否显示联系售后按钮 boolean false

# Event

事件名 说明 回调参数
bind:click 点击通知栏时触发 event: Event
bind:close 关闭通知栏时触发 event: Event
bind:button 点击按钮时触发（联系售后按钮） -

# Slot

名称 说明
- 通知文本内容，仅在 text 属性为空时有效
left-icon 自定义左侧图标
- 通知文本内容，仅在 text 属性为空时有效

# 外部样式类

名称 说明
custom-class 根节点样式类

← 缺省页（empty） →