# tui-roll-news 滚动消息会员组件 V2.9.5+

介绍

滚动消息，主要用于热点新闻、搜索展示等

# 引入

# uni-app引入

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

import tuiRollNews from "@/components/thorui/tui-roll-news/tui-roll-news.vue"
export default {
	components:{
		tuiRollNews
	}
}

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

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

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

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

{
  "usingComponents": {
    "tui-roll-news": "/components/thorui/tui-roll-news/tui-roll-news"
  }
}

# 代码演示

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

默认使用

通过 list 属性设置消息列表数据。

<!--uni-app-->
<tui-roll-news :list="list">
	<view class="tui-icon__box">
		<tui-icon name="news-fill" :size="48" unit="rpx" color='#f54f46'></tui-icon>
	</view>
</tui-roll-news>

<!--微信小程序-->
<tui-roll-news list="{{list}}">
  <view class="tui-icon__box">
	<tui-icon name="news-fill" size="48" unit="rpx" color='#f54f46'></tui-icon>
  </view>
</tui-roll-news>

//list 数据
list: [{
	id: 1,
	title: '致力发展负责任的人工智能 中国发布八大治理原则'
}, {
	id: 2,
	title: '格兰仕暗示拜访拼多多后遭天猫打压，拼多多高层赞其有勇气'
}, {
	id: 3,
	title: '阿里计划将每股普通股拆为8股，增加筹资灵活性'
}]

调整样式，显示prop调整

通过 hotSearch 属性设置列表数据，prop 属性设置显示内容字段key，radius 属性设置圆角值。

<!--uni-app-->
<view class="tui-padding">
	<tui-roll-news :list="hotSearch" prop="name" :radius="80">
		<view class="tui-icon__box">
			<tui-icon name="search" :size="40" unit="rpx" color="#999"></tui-icon>
		</view>
	</tui-roll-news>
</view>

<!--微信小程序-->
 <view class="tui-padding">
  <tui-roll-news list="{{hotSearch}}" prop="name" radius="{{80}}">
	<view class="tui-icon__box">
	  <tui-icon name="search" size="40" unit="rpx" color="#999"></tui-icon>
	</view>
  </tui-roll-news>
</view>

//列表数据
hotSearch: [{
		name: "夏季穿搭"
	},
	{
		name: "减脂冬瓜荷叶蛋"
	},
	{
		name: "玻尿酸补水面膜"
	}
]

.tui-padding {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
}

# Slots

插槽名称	说明
default	滚动消息左侧显示内容
right	通滚动消息右侧显示内容

# Props

属性名	类型	说明	默认值
list	Array	列表数据	[ ]
prop	String	显示的列表字段	title
width	Number, String	容器宽度，单位rpx ，为0则使用100%	0
height	Number, String	容器高度，单位rpx	80
size	Number, String	字体大小，单位rpx	28
color	String	字体颜色	#333
bold	Boolean	字体是否加粗	false
background	String	背景色	#fff
radius	Number, String	圆角值	0
padding	String	padding值，格式同css	0 30rpx
lines	Number	内容显示行数，超出隐藏，多行注意调整高度	1
interval	Number	自动切换时间间隔（毫秒）	3000
vertical	Boolean	是否纵向滚动切换内容	true

# Events

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

事件名	说明	回调参数
click	点击滚动消息时触发	{index,item}
leftClick	点击滚动消息左侧slot中内容时触发	{ }
rightClick	点击滚动消息右侧slot中内容时触发	{ }