更新记录

1.0.1（2026-04-08） 下载此版本

移除组件tailwindcss

1.0.0（2026-04-08） 下载此版本

1.0.0 自定义纵向滚动通知栏

平台兼容性

uni-app(4.51)

y-notice-bar 自定义滚动通知栏

自定义公告栏组件，支持垂直/横向滚动播放公告，提供灵活的插槽以便自定义左侧头部、右侧尾部以及滚动项的内容。

属性 (Props)

插槽 (Slots)

效果预览

使用示例

以下是一个完整的使用示例，包含自定义头部、滚动项及尾部查看更多按钮：

<template>
    <y-notice-bar :list="testList">
        <!-- 头部插槽：活动公告标识 -->
        <template #header>
            <view class="w-10 h-10 bg-[#76CFFF] rounded-lg center text-center px-1 text-white text-[24rpx]">
                活动公告
            </view>
        </template>

        <!-- 滚动项插槽：自定义图文展示 -->
        <template #item="{ item, index }">
            <view class="flex items-center w-full overflow-hidden">
                <image class="w-5 h-5 rounded mr-1 shrink-0" :src="item.images" mode="aspectFill"></image>
                <view class="text-sm truncate flex-1">{{ item.name || item }}</view>
            </view>
        </template>

        <!-- 尾部插槽：查看更多 -->
        <template #footer>
            <view class="flex-shrink-0 center">
                <view class="text-xs text-[#76CFFF]">查看更多</view>
                <uv-icon name="arrow-right" color="#76CFFF" size="20rpx"></uv-icon>
            </view>
        </template>
    </y-notice-bar>
</template>

<script setup>
import { ref } from 'vue'

const testList = ref([
    { name: '恭喜用户张三成功领养布偶猫', images: '/static/logo.png' },
    { name: '新上架10只待领养小萌宠，快来看看吧', images: '/static/logo.png' }
])
</script>