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: "发货及客服服务,在此祝您假期愉快!"
},
]