更新记录

1.0.1（2026-01-28） 下载此版本

• 增加了使用示例

1.0.0（2026-01-28） 下载此版本

• 第一次提交

平台兼容性

uni-app(4.86)

uni-app x(4.86)

ho-notice-bar

一个简单的用于展示滚动通知的组件。

• 只支持横向滚动。
• 支持多条数据（列表数据）。
• 只测试了H5、微信小程序、安卓APP，其他平台未测试。

属性

样式变量

事件

• index: 通知项索引
• item: 通知项数据

插槽

示例

<template>
    <view class="content">
        <ho-notice-bar
            :list="list"
            @onItemClick="handleItemClick"
        >
            <template #left>
                <view class="notice-left"> 通知 </view>
            </template>
            <template #right>
                <view class="notice-right"> 更多 </view>
            </template>
        </ho-notice-bar>
    </view>
</template>

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

    // 处理点击事件
    function handleItemClick(index, item) {
        console.log(`点击了第${index + 1}条通知：${item}`);
        uni.showModal({
            content: `点击了第${index + 1}条通知：${item}`,
            showCancel: false
        });
    }

    // 动态更新列表数据
    // setTimeout(() => {
    //  list.value = ["AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", "BBBBBBBBBBBBBBBBBBBBBBBBBBB"];
    // }, 3000);
</script>

<style>
    .content {
        padding: 15px;
        font-size: 13px;
    }

    .notice-left {
        font-size: 13px;
        font-weight: bold;
        padding: 0 10px;
        color: #ff0000;
    }

    .notice-right {
        font-size: 10px;
        padding: 0 10px;
        color: #0000ff;
    }
</style>

最后说明

封装此插件的原因是因为在一个项目中需要用到滚动通知，但是在插件时长搜索到的大多都不支持多条数据，所以就自己封装了一个。此插件较为简单，使用前需评估是否满足你的需求，开源不易，多多理解。