TuniaoUI

# NoticeBar 通知栏

该组件用于滚动通告场景，有多种模式可供选择

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

  • 通过list数组参数设置需要滚动的内容
  • 滚动mode参数有两种模式，分别是horizontal水平滚动，vertical垂直滚动。其中在水平滚动模式下又可以通过circular来配置是衔接滚动(true)还是步进滚动(false)， 衔接滚动滚动会把list数组元素拼接成一个字符串形式(用逗号进行分隔)进行滚动
<template>
  <view>
    <tn-notice-bar :list="list" mode="horizontal"></tn-notice-bar>

    <tn-notice-bar :list="list" mode="horizontal" :circular="false"></tn-notice-bar>

    <tn-notice-bar :list="list" mode="vertical"></tn-notice-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          'TuniaoUI现已发布V1.0.0',
          '今天天气晴朗，适合处理bug',
          'TuniaoUIV2.0.0即将发布',
          '今天想提前下班，领导不允许："你提前走人就算你是旷工了啊！"'
        ]
      }
    }
  }
</script>

# 设置背景和字体颜色

可以通过backgrundColor和fontColor来设置颜色信息。设置通知栏的颜色可以使用TuniaoUI内置样式中的颜色值进行设置

<tn-notice-bar :list="list" mode="horizontal" backgroundColor="tn-bg-red" fontColor="#FFFFFF"></tn-notice-bar>

# 自定义图标

可以通过设置leftIcon、rightIcon为true来控制是否显示左右两边的图标，默认时显示左图标。

  • 通过leftIconName、rightIconName来设置图标的名称（TuniaoUI中自带的）。
  • 通过leftIconSize、rightIconSize来设置图标的大小（单位rpx）。
<tn-notice-bar :list="list" :leftIcon="true" :rightIcon="true"></tn-notice-bar>

# 设置滚动速度

  • mode为vertical(垂直滚动)，或者mode为horizontal且circular为false时，两者都可视为"步进"滚动，此时通过duration设置滚动周期时长，单位为ms
  • mode为horizontal且circular为true时，可视为"水平衔接滚动"，此时TuniaoUI加入了一个滚动因子参数，可确保在任意多内容情况下，滚动速度恒定不变， 可通过speed参数配置每秒滚动的距离，单位为rpx
<tn-notice-bar :list="list" mode="horizontal" :speed="140"></tn-notice-bar>

<tn-notice-bar :list="list" mode="horizontal" :circular="false" :duration="1500"></tn-notice-bar>

<tn-notice-bar :list="list" mode="vertical" :duration="1500"></tn-notice-bar>

# 设置滚动状态

  • autoplay参数默认为true，控制是否自动播放滚动通告
  • playState参数为paused，滚动会暂停，为play滚动继续播放
<tn-notice-bar :list="list" mode="horizontal" :speed="140" :playStatus="paused"></tn-notice-bar>

# API

# Props

属性名 说明 类型 默认值 可选值
list 滚动的内容 Array - -
show 显示通知栏 Boolean true false
playStatus 通知栏信息滚动状态 String play paused
mode 信息滚动方向 String horizontal vertical
backgroundColor 背景颜色 String #01BEFF 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontColor 字体颜色 String - 颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize 字体大小 Number 26 -
fontUnit 字体大小的单位 String rpx -
leftIcon 显示左图标 Boolean true false
leftIconName 左图标名称，使用TuniaoUI内置的图标 String sound -
leftIconSize 左图标大小，单位rpx Number 34 -
rightIcon 显示右图标 Boolean false true
rightIconName 右图标名称，使用TuniaoUI内置的图标 String right -
rightIconSize 右图标大小，单位rpx Number 26 -
closeBtn 显示关闭按钮 Boolean false true
radius 圆角的值，单位rpx Number 0 -
padding 内边距 String 18rpx 24rpx -
speed 水平滚动文字的速度，mode为horizontal且circular为true时有效，单位每秒滚动rpx Number 160 -
duration 垂直滚动切换速度，mode为vertical或者circular为false时有效，单位ms Number 2000 -
circular 水平滚动时有效，水平滚动的文字是否衔接一起 Boolean true false
autoHidden 当list为空时，是否自动隐藏通知栏 Boolean true false

# Slots

none

# Event

事件名称 说明 回调参数
click 点击通知栏的文字时触发，当mode为horizontal且circular为false，mode为vertical时有效 index：当前点击的文本在list数值中的位置
close 点击关闭按钮时触发 -
leftClick 点击了左边图标时触发 -
rightClick 点击了右边图标时触发 -
end 列表消息滚动完一个周期时触发，当mode为horizontal且circular为false，mode为vertical时有效 -

← Collapse 折叠面板 →