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>