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