# tui-notice-bar 通告栏

介绍

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiNoticeBar from "@/components/thorui/tui-notice-bar/tui-notice-bar"
export default {
	components:{
		tuiNoticeBar
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-notice-bar": "/components/thorui/tui-notice-bar/tui-notice-bar"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

单行展示

通过 padding 属性设置通告栏padding值(scrollable为false时使用),single 属性设置是否为单行显示,超出隐藏,content 属性设置通告栏文本内容。

<!--uni-app-->
<tui-notice-bar :padding="['0','30rpx']" single :content="content"></tui-notice-bar>

<!--微信小程序-->
 <tui-notice-bar padding="{{['0','30rpx']}}" single content="{{content}}"></tui-notice-bar>
滚动通告栏

通过 scrollable 属性设置是否滚动(添加后控制单行效果取消),is-left 属性控制是否需要左侧slot内容。

<!--uni-app-->
<tui-notice-bar is-left scrollable color="#f54f46" :content="content">
	<template v-slot:left>
		<view class="tui-padding">
			<tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
		</view>
	</template>
</tui-notice-bar>

<!--微信小程序-->
<tui-notice-bar is-left scrollable color="#f54f46" content="{{content}}">
  <view class="tui-padding" slot="left">
	<tui-icon name="news-fill" size="{{48}}" unit="rpx" color="#f54f46"></tui-icon>
  </view>
</tui-notice-bar>

# Slots

名称 说明
left 通告栏左侧显示内容
right 通告栏右侧显示内容

# Props

参数 类型 说明 默认值
height [Number, String] 通告栏高度,单位rpx 72
content String 通告栏文本内容 -
size [Number, String] 通告栏字体大小,单位rpx 28
color String 通告栏字体颜色 #ff7900
bold Boolean 通告栏字体是否加粗 false
backgroundColor String 通告栏背景色 #fff8d5
padding Array scrollable为false时使用,['20rpx','30rpx','20rpx','30rpx']=>[上,右,下,左],为了兼容nvue [ ]
single Boolean 是否单行显示 false
scrollable Boolean 是否滚动,添加后控制单行效果取消 false
speed Number 每秒滚动速度(距离) 默认 100px/s 100
activeMode String backwards: 动画从头开始播;forwards:动画从结束点开始播 backwards
isLeft Boolean 是否需要左侧slot内容 false
isRight Boolean 是否需要右侧slot内容 false
isFixed Boolean 是否固定在顶部 false
top String isFixed为true时top值 H5:44px,非H5:0px
params [Number, String] 自定义参数 0

# Events

事件名 说明 回调参数
click 点击通告栏内容时触发 {params}
leftClick 点击通告栏左侧slot中内容时触发 {params}
rightClick 点击通告栏右侧slot中内容时触发 {params}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码