微信小程序上下轮播公告

wxml:

<!-- 轮播 通知 start -->

<view class='view_notice_contain'>

<image src='../../image/image_notice.png' class='image_notice' mode="widthFix" style="width:100rpx;height:100rpx"></image>

 

<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="5000">

<block wx:for="{{noticeList}}">

<swiper-item >

<view class="swiper_item">{{item.content0}}</view>

<view class="swiper_item">{{item.content1}}</view>

</swiper-item>

</block>

 

</swiper>

</view>

<!-- 轮播 通知 end -->

 

wxss:

.view_notice_contain {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

height: 120rpx;

background: white;

font-size: 26rpx;

}

 

.image_notice {

margin-left: 5rpx;

}

 

.swiper_container {

height: 120rpx;

width: 100%;

}

.swiper_item {

font-size: 26rpx;

color: #666;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

letter-spacing: 2px;

padding-top: 20rpx;

}

 

js:

noticeList: [{

content0: "国庆假期暂停发货温馨提醒：尊敬的用户，",

content1: "国庆节假期将至，我们将在10.1-10.7节日期间暂"

},

{

content0: "停发货，并停止客服服务，将于10月8日恢复正常",

content1: "发货及客服服务，在此祝您假期愉快！"

},

 

]