组件库文档 tmui.design
滚动通知 RollNotice v3.0.7+
主要是显示通知公告,多条内容形成一个滚动展示的效果。
🌶️ 滚动通知 RollNotice 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app>
<tm-roll-notice @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","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 | "" | 待滚动的消息内容 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
click | index:number | - | 事件参数返回Index,当前的消息索引,如果list为string时,这里始终是0 |
🌽 slot插槽
无
🥗 ref方法
无