Skip to content
On this page

组件库文档 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-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""待滚动的消息内容

🌹 事件

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

🌽 slot插槽

🥗 ref方法