uni-app 轮播图

	<!-- interval : 自动切换时间间隔 -->
	<!-- duration : 滑动动画时长   -->
	<!-- circular : 是否采用衔接滑动,即播放到末尾后重新回到开头 -->
	<!-- indicator-dots : 是否显示面板指示点 -->
	<!-- https://uniapp.dcloud.io/component/swiper?id=swiper -->
	<view class="uni-margin-wrap">
		<swiper class="swiper" circular :autoplay="true" :interval="5000" indicator-dots :duration="800">
			<swiper-item class="swiper-item"> 
					<image src="../../static/images/1.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="swiper-item">
					<image src="../../static/images/2.jpg" mode=""></image>
			</swiper-item>
			<swiper-item class="swiper-item">
					<image src="../../static/images/3.jpg" mode=""></image>
			</swiper-item>
		</swiper>
	</view>





<style scoped>
	.swiper {
		width: 750rpx;
		height: 417rpx;
	}
	.swiper-item {
		width: 750rpx;
		height: 417rpx;
	}
	.swiper-item image {
		height: 100%;
		width: 100%;
	}
</style>

  

posted @ 2020-11-13 14:17  野鹤亦闲云  阅读(1372)  评论(0编辑  收藏  举报