uni-app swiper实现公告栏上下循环滚动（整理）

//效果图-文字可上下滚动播放

<template>
	<view class="row-me row-center margin-left30 margin-right30 broadcast">
		<image src="../../static/home/laba.png" mode="" class="margin-left30 margin-right20 horn"></image>
		<swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000" class="margin-right30 swiperBox">
			<swiper-item v-for="(item,index) in noticeList" :key="index" class="row-me row-center swiperItem">
				{
    
    {
    
    item.time}} <view class="margin-left10 txt1">{
    
    {
    
    item.message}}</view>收款成功<view class="txt2">{
    
    {
    
    item.money}}</view>元
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				noticeList:[	//公告栏播报
					{
    
    
						time: '12:30',
						message: '支付宝',
						money: '100',
					},
					{
    
    
						time: '12:30',
						message: '微信',
						money: '50',
					},
					{
    
    
						time: '12:30',
						message: '银联',
						money: '60',
					},
				],
			}
		},
	}
</script>
<style lang="scss" scoped>
	.broadcast{
    
    
		margin-top: -40rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.horn {
    
    
			width: 40rpx;
			height: 40rpx;
		}
		.swiperBox{
    
    
			width: 500rpx;
			// background: red;
			height: 80rpx;
			.horn {
    
    
				width: 40rpx;
				height: 40rpx;
			}
			.swiperItem{
    
    
				.txt1 {
    
    
					color: #4E9D77;
				}
				
				.txt2 {
    
    
					color: #F29A38;
				}
			}
			
		}
	}

</style>