成品直播源码推荐,uniapp多行滚动通知

发布时间 2023-04-26 14:31:10作者: 云豹科技-苏凌霄

成品直播源码推荐,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;
       
        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多行滚动通知, 更多内容欢迎关注之后的文章