uni-app通告栏（单条滚动）

html

<view class="uni-swiper-msg">

   <swiper class="swiper" vertical="true" autoplay="false" duration="500" interval="4000" @animationfinish="timer">

    <swiper-item v-for="(item, index) in msg" :key="index">

     <view @tap="notice(item)">第{{item}}个会员充值成功</view>

    </swiper-item>

   </swiper>

</view>

css

.uni-swiper-msg {

  padding: 20upx 20upx !important;

  flex-wrap: nowrap !important;

  display: flex !important;

  .uni-swiper-msg-icon {

   width: 50upx !important;

   margin-right: 20upx !important;

   image {

    width: 100% !important;

    flex-shrink: 0 !important;

   }

  }

  .swiper {

   font-size: 12px;

   width: 100% !important;

   height: 50upx !important;

   swiper-item {

    line-height: 50upx !important;

    font-size: 30upx !important;

    color: #F5283A !important;

    font-weight: 700 !important;

    view {

     overflow: hidden !important;

     white-space: nowrap !important;

     text-overflow: ellipsis !important;

    }

   }

  }

 }