更新记录

1.0.0（2025-05-06） 下载此版本

新增组件

平台兼容性

hbxw-roll-notification滚动通知组件

介绍

滚动通知组件，用于展示循环滚动的通知消息，支持自定义通知内容和动画效果。组件内置了平滑的滚动动画，可用于展示最新活动、用户操作等信息。

使用示例

推荐先直接复制示例代码到工程中看效果了解下使用方法再投入项目使用。

<template>
    <view class="container">
        <!-- 基础用法 -->
        <view class="section">
            <view class="title">基础用法</view>
            <hbxw-roll-notification :notifications="notifications" />
        </view>

        <!-- 自定义时间间隔 -->
        <view class="section">
            <view class="title">自定义时间间隔（5秒）</view>
            <hbxw-roll-notification :notifications="notifications" :interval="5000" />
        </view>

        <!-- 自定义动画时长 -->
        <view class="section">
            <view class="title">自定义动画时长（0.4秒）</view>
            <hbxw-roll-notification :notifications="notifications" :animationDuration="400" />
        </view>

        <!-- 自定义内容插槽 -->
        <view class="section">
            <view class="title">自定义UI</view>
            <hbxw-roll-notification :notifications="customNotifications">
                <template #default="{ item }">
                    <view class="custom-notification">
                        <text class="custom-text">📢 {{ item.content }}</text>
                    </view>
                </template>
            </hbxw-roll-notification>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                notifications: [
                    {
                        name: '张三',
                        action: '刚刚下单成功',
                        avatar: '/static/rollNotification/picurl0.jpg'
                    },
                    {
                        name: '李四',
                        action: '3分钟前购买了商品',
                        avatar: '/static/rollNotification/picurl1.jpg'
                    },
                    {
                        name: '王五',
                        action: '5分钟前加入了会员',
                        avatar: '/static/rollNotification/picurl2.jpg'
                    }
                ],
                customNotifications: [
                    { content: '新品上架，限时优惠！' },
                    { content: '周末大促，全场8折！' },
                    { content: '会员专享活动正在进行中' }
                ]
            }
        },
        methods: {

        }
    }
</script>

<style>
.container {
    padding: 30rpx;
}
.section {
    margin-bottom: 50rpx;
}
.title {
    font-size: 28rpx;
    margin-bottom: 50rpx;
    font-weight: bold;
}
.custom-notification {
    padding: 10rpx 20rpx;
    background-color: green;
    border-radius: 20rpx;
}
.custom-text {
    color: #FF9500;
    font-size: 24rpx;
}
</style>

API

Props

插槽

通知数据结构

使用默认插槽时，每个通知对象应包含以下属性：

{
  avatar: String, // 头像URL
  name: String,   // 用户名
  action: String  // 用户动作描述
}

如果使用自定义插槽，可以根据需要自定义通知对象的结构。

示例效果

组件默认样式展示了一个带有用户头像和文本的通知条目，通过动画效果平滑地上下滚动切换。通知从底部进入，向上滑出，整体效果简洁流畅。