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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM