成品直播原始碼推薦，uniapp多行滾動通知

成品直播原始碼推薦，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>

 以上就是成品直播原始碼推薦，uniapp多行滾動通知， 更多內容歡迎關注之後的文章