更新记录

1.0.0（2025-03-24）

初次提交，支持水平滚动和垂直滚动，通知样式及内容完全由插件使用者决定。

平台兼容性

滚动通知

滚动通知，支持水平滚动和垂直滚动，通知样式及内容完全由插件使用者决定。

示例

<template>
    <view class="content">
        <view style="padding: 30rpx;">水平滚动：</view>
        <view class="notice-demo-x">
            <bp-notice :list="notice" direction="horizontal" :duration="20" v-slot="{ item, index }">
                <view class="notice-item">
                    <text>{{ index + 1 }}.</text>
                    <image :src="item.avatar" mode="aspectFill" style="width: 40rpx;height: 40rpx;border-radius: 50%;"></image>
                    <text style="color: #666;">恭喜</text>
                    <text style="color: #000;">{{ item.name }}</text>
                    <text style="color: #666;">获得</text>
                    <text style="color: #D1894E;">{{ item.amount }}</text>
                    <text style="color: #666;">元大奖</text>
                </view>
            </bp-notice>
        </view>

        <view style="padding: 30rpx;">垂直滚动：</view>
        <view class="notice-demo-y">
            <bp-notice :list="notice" :limit="4" direction="vertical" :duration="10" v-slot="{ item, index }">
                <view class="notice-item">
                    <text>{{ index + 1 }}.</text>
                    <image :src="item.avatar" mode="aspectFill" style="width: 40rpx;height: 40rpx;border-radius: 50%;"></image>
                    <text style="color: #666;">恭喜</text>
                    <text style="color: #000;">{{ item.name }}</text>
                    <text style="color: #666;">获得</text>
                    <text style="color: #D1894E;">{{ item.amount }}</text>
                    <text style="color: #666;">元大奖</text>
                </view>
            </bp-notice>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                notice: [
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                    { avatar: '/static/logo.png', name: 'hello world', amount: 2000 },
                ],
            }
        },
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 30rpx;
    }

    .notice-demo-y {
        background-color: #f0f0f0;
        padding: 20rpx;
        border-radius: 12rpx;
        .notice-item {
            height: 80rpx;
            padding: 0 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10rpx;
            border-radius: 40rpx;
            background-color: #fff;
            border: 1rpx solid #99999999;
            text-wrap: nowrap;
        }
    }

    .notice-demo-x {
        background-color: #f0f0f0;
        padding: 20rpx;
        border-radius: 12rpx;
        .notice-item {
            width: 700rpx;
            height: 80rpx;
            padding: 0 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10rpx;
            border-radius: 40rpx;
            background-color: #fff;
            border: 1rpx solid #99999999;
            text-wrap: nowrap;
        }
    }
</style>

API

属性

插槽