组件库文档 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-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | number | 750 | 实际宽度会减去margin值。 |
height | number | 70 | 高度 |
fontSize | number | 26 | 字号 |
fontColor | String | "" | 文字颜色,默认是自动匹配主题 |
icon | String | "tmicon-info-circle" | 左图标,空时,不显示 |
showRight | Boolean | false | 是否显示右图标 |
margin | Array<number> | [32,0] | 外间距,x,y |
speed | number | 60 | 滚动速度 |
list | Array<string>/string/object/Array<object> | "" | 待滚动的消息内容 |
rangeKey | string | text | 当list是object,object[] 时,需要指定此字段来显示文本 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | index:number | - | 事件参数返回Index,当前的消息索引,如果list为string时,这里始终是0 |
🌽 slot插槽
无
🥗 ref方法
无