直播网站源码，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多行滚动通知 上下多行滚动， 更多内容欢迎关注之后的文章