滚动通知 NoticeBar

滚动通知组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 list 属性设置列表数据。
• 通过 keyName 属性设置要显示的字段。
• 通过 current 属性设置默认显示的索引。

<template>
    <pure-notice-bar :list="list" :current="current"></pure-notice-bar>
</template>

<script setup>
    import { ref } from "vue";
    import { onReady } from "@dcloudio/uni-app";

    // 通知列表
    const list = ref([]);

    // 默认下标
    const current = ref(0);

    // 初始化数据
    onReady(() => {
        initList();
    });

    // 初始化列表
    function initList() {
        const _list = [
            { id: 1, text: "君不见，黄河之水天上来，奔流到海不复回。" },
            { id: 2, text: "君不见，高堂明镜悲白发，朝如青丝暮成雪。" },
            { id: 3, text: "人生得意须尽欢，莫使金樽空对月。" },
            { id: 4, text: "天生我材必有用，千金散尽还复来。" },
            { id: 5, text: "烹羊宰牛且为乐，会须一饮三百杯。" },
            { id: 6, text: "岑夫子，丹丘生，将进酒，杯莫停。" },
            { id: 7, text: "与君歌一曲，请君为我倾耳听。" },
            { id: 8, text: "钟鼓馔玉不足贵，但愿长醉不愿醒。" },
            { id: 9, text: "古来圣贤皆寂寞，惟有饮者留其名。" },
            { id: 10, text: "陈王昔时宴平乐，斗酒十千恣欢谑。" },
            { id: 11, text: "主人何为言少钱，径须沽取对君酌。" },
            { id: 12, text: "五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。" },
        ];
        setTimeout(() => {
            list.value = _list;
        }, 1000);
    }
</script>

纵向模式

• 通过 vertical 属性设置纵向模式。

<template>
    <pure-notice-bar :list="list" :current="current" vertical></pure-notice-bar>
</template>

停靠一下

• 默认情况下，通知会直接滚动直至消失，通过设置 dock 属性可以让通知滚动到左侧或顶部后停留一下，再继续滚动到消失。
• 通过 dockTime 属性可以设置停留时间，接受两种值： always: 设置成 always 后，通知会一直停留。 number: 设置成数字后，会停留对应毫秒数。

提示

由于纵向模式使用 swiper 实现的，在某些平台将 swiper 的 interval 会导致 swiper 异常，所以在某些平台即使不设置 dock 也会停留一小下。

<template>
    <pure-notice-bar :list="list" :current="current" dock></pure-notice-bar>
    <!-- 一直停留，适用于一条数据时 -->
    <pure-notice-bar :list="list" :current="current" dock dockTime="always"></pure-notice-bar>
</template>

显示行数

• 给组件添加对应的辅助类名。

提示

辅助类使用规则

提示

显示超过一行时，组件自动计算了一个高度，可以自行在样式中修改。

<template>
    <!-- pure-notice-bar-line-${1-10}: 显示的行数，最大10行 -->
    <pure-notice-bar :list="list" dock class="pure-notice-bar-line-1"></pure-notice-bar>
</template>

顶部对齐

• 给组件添加对应的辅助类名。

提示

辅助类使用规则

• 组件默认是垂直居中对齐的。
• 在显示行数超过一行时，你可能会用到顶部对齐。

<template>
    <pure-notice-bar :list="list" dock class="pure-notice-bar-line-2 pure-notice-bar-align-top"></pure-notice-bar>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	右侧按钮和通知 item 的 hover-calss 同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
list	列表数据	Array	[]	-	+1.0.0
current	默认下标	Number	0	-	+1.0.0
keyName	中显示字段的字段名	String	text	-	+1.0.0
show	是否显示	Boolean	true	false	+1.0.0
leftIcon	左侧图标名称，同图标组件（Icon）的 name 属性，参考	String	__gonggao	-	+1.0.0
rightIcon	右侧图标名称，同图标组件（Icon）的 name 属性，参考	String	-	-	+1.0.0
speed	移动速度，每秒移动的 px 值，只在横向模式时生效	[Number, String]	100	-	+1.0.0
duration	滚动时长，毫秒，只在纵向模式时生效	[Number, String]	1000	true	+1.0.0
vertical	是否纵向/垂直模式	Boolean	false	true	+1.0.0
dock	是否在左侧/顶部停靠一下	Boolean	false	true	+1.0.0
dockTime	停靠时长，毫秒	[Number, String]	3000	always	+1.0.0

Event

事件名	说明	回调参数	版本
itemClick	通知点击事件	item: 通知数据； index: 数据下标；	+1.0.0
iconClick	右侧图标点击事件	-	+1.0.0

Slots

名称	说明	参数	版本
left	左侧内容	-	+1.0.0
right	右侧内容	-	+1.0.0