uni-app微信小程序使用Swiper实现公告滚动效果

我们来先看看效果图：<view class="notice" v-if="noticeList.length"><text class="left">系统公告</text><swiper class="swiper-nav" :circular="true" vertical="true" :autoplay="true" :interval="5000"

我是真的cai

5315人浏览 · 2020-06-04 18:24:10

我是真的cai · 2020-06-04 18:24:10 发布

我们来先看看效果图：
在这里插入图片描述

<view class="notice" v-if="noticeList.length">
	<text class="left">系统公告</text>
	<swiper class="swiper-nav" :circular="true" vertical="true" :autoplay="true" :interval="5000" :duration="1000">
		<swiper-item style="display: table;" @touchmove.stop='stopTouchMove' v-for="(item,index) in noticeList" :key="index">
				<view style="display: table-cell;vertical-align: middle;" class="right">{{item.messageContent}}</view>					
		</swiper-item>
	</swiper>
</view>
PS: display: table;display: table-cell;vertical-align: middle;
为了内容标题居中效果