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;
}
196 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注