uniapp多行滚动通知 上下多行滚动 公告通知 单行消息列 多行消息列

效果展示：

效果样式我没有多写，需要自己定义特殊样式，可自定义样式

代码：template部分

<template>
    <view class="content">
        <swiper class="swiper" 
        vertical 
        circular 
        autoplay 
        interval="2000" 
    // 重点 display-multiple-items 设置显示多少条数据
        display-multiple-items='3'>
            <swiper-item>
                <view class="box">
                    <view>多行滚动111</view>
                    <view>></view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="box">
                    <view>多行滚动222</view>
                    <view>></view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="box">
                    <view>多行滚动333</view>
                    <view>></view>
                </view>
            </swiper-item>
            <swiper-item>
                <view class="box">
                    <view>多行滚动444</view>
                    <view>></view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style>
    .swiper{
        width: 500rpx;
        /* 高度跟自己需要的子元素更改，我这里是显示3个，每个50rpx 所以是150rpx */
        height: 150rpx;
        background-color: aquamarine;
        margin: 50rpx auto;
    }
    .box{
        font-size: 20rpx;
        height: 50rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10rpx;
    }
</style>