uniAPP·轮播图 swiper

uniAPP·轮播图 swiper

0【效果】

1【view】

<view class="swiper-view">
				<!-- 轮播图组件 -->
				<swiper class="swiper-class" autoplay="true" interval="5000" indicator-dots="true">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.img" ></image>
					</swiper-item>
				</swiper>
				<!-- /轮播图组件 -->
			</view>

2【data】

<script>
	export default {
		data() {
			return {
				
				swiperList: [{
						id: 1001,
						img: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg',
					},
					{
						id: 1002,
						img: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner21.jpg',
					},
					{
						id: 1003,
						img: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg',
					},
					{
						id: 1004,
						img: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
					}
				],

			}

		},
		onHide() {

		},
		onLoad() {
			console.log("onLoad home")

		},
		onShow() {
			console.log("onShow home")

		},
		methods: {
			
		},
		components: {

		},
	}
</script>

3【css】注意高度必须使用 rpx 单位

.swiper-view {
	height: 400rpx;
	margin: 8px;
	padding: 8px;
	border-radius: 8px;
	background-color: #e6e6e6;
}

.swiper-class {
	height: 400rpx;
	border-radius: 8px;
	background-color: #108080;
}

.swiper-class image {
	width: 100%;
	height: 400rpx;
	border-radius: 8px;
	background-color: #007AFF;
}