tui-notice-vertical 纵向通告栏 会员组件 V2.9.5+

介绍

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

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiNoticeVertical from "@/components/thorui/tui-notice-vertical/tui-notice-vertical.vue"
export default {
	components:{
		tuiNoticeVertical
	}
}

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

uni-app版本平台差异说明

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

微信小程序引入（可在app.json中全局引入）

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

代码演示

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

滚动通告栏

内容放置组件内部即可。

<view class="tui-notice--box">
	<view class="tui-notice--title">通告栏</view>
	<tui-notice-vertical>
		<view class="tui-notice--content">
			<view>全体同仁：</view>
			<view class="tui-p">
				值此新春佳节来临之际，为让大家拥有一个快乐而充实的春节，根据国务院办公厅20__年春节放假安排：20__年春节从2月7日至2月13日放假调休共7天，2月6日，2月14日上班。现公司领导决定，我司春节放假安排如下：
			</view>
			<view class="tui-p">一、1月7日开始春节放假，共7天，截止时间为2月13日，2月14日正式上班；</view>
			<view class="tui-p">二、假期因生产需要，需要加班人员必须于放假前填写加班申请单，经审批后方可加班；</view>
			<view class="tui-p">
				三、假日期间，请各部门提前安排好值班和安全保卫工作，各部门负责人电话必须24小时保持畅通，经备必时之需。如遇重大突发事件，及时报告并妥善处置，确保员工度过愉快的春节。</view>
			<view class="tui-right">
				<view class="tui-p">行政人事部</view>
				<view>2023-xx-xx</view>
			</view>
		</view>
	</tui-notice-vertical>
</view>

.tui-notice--box {
	width: 100%;
	height: 520rpx;
	position: relative;
	border: 6px solid #ff7900;
	box-sizing: border-box;
	border-radius: 12rpx;
}

.tui-notice--title {
	width: 100%;
	text-align: center;
	font-size: 48rpx;
	line-height: 48rpx;
	font-weight: bold;
	color: #EB0909;
	padding: 20rpx 0;
}

.tui-notice--content {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
}

.tui-right {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
}

.tui-p {
	text-indent: 2em;
	padding: 12rpx 0;
	line-height: 52rpx;
}

Slots

插槽名称	说明
default	通告栏内容

Props

属性名	类型	说明	默认值
width	[Number, String]	滚动容器宽度，单位rpx，0 则使用100%	0
height	[Number, String]	滚动容器高度 ，单位rpx	400
background	String	通告栏背景色	transparent
radius	[Number, String]	通告栏容器圆角值，单位rpx	0
padding	String	通告栏容器padding值，同css格式，如：20rpx 30rpx	0
speed	Number, String	每秒滚动速度（距离） 默认 20px/s	20
activeMode	String	backwards: 动画从头开始播；forwards：动画从结束点开始播	backwards

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
-	-	-

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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