Skip to content
On this page

组件库文档 tmui.design

滚动通知 RollNotice v3.0.7+

主要是显示通知公告,多条内容形成一个滚动展示的效果。


🌶️ 滚动通知 RollNotice 示例

查看模拟效果
示例模板
vue
<template>
	<tm-app>
		<tm-roll-notice color="#abff66"  @click="test" list="测试滚动测试滚动测试滚动测试滚动测试滚动"></tm-roll-notice>
		<tm-roll-notice @click="test" :text="false" :list="content"></tm-roll-notice>
		<tm-roll-notice @click="test" :shadow="2" :round="2" color="red" :text="false" linear="right" :list="content"></tm-roll-notice>
	</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmRollNotice from '@/tmui/components/tm-roll-notice/tm-roll-notice.vue'

const content = ref(['11测试滚动试滚end', { text: '22测试滚动测试滚动测试滚动测试滚动测试滚动' }])
const test = (index: number) => {
	console.log('点击了:', index)
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
widthnumber750实际宽度会减去margin值。
heightnumber70高度
fontSizenumber26字号
fontColorString""文字颜色,默认是自动匹配主题
iconString"tmicon-info-circle"左图标,空时,不显示
showRightBooleanfalse是否显示右图标
marginArray<number>[32,0]外间距,x,y
speednumber60滚动速度
listArray<string>/string/object/Array<object>""待滚动的消息内容
rangeKeystringtext当list是object,object[]时,需要指定此字段来显示文本

🌹 事件

事件名参数返回数据描述
clickindex:number-事件参数返回Index,当前的消息索引,如果list为string时,这里始终是0

🌽 slot插槽

🥗 ref方法