<template>
	<view class="content">
		<swiper class="swiper"  :indicator-dots="true" :autoplay="true" :interval="2000"
						:duration="500">
						<swiper-item>
							<view class="swiper-item ">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item">C</view>
						</swiper-item>
		</swiper>
		1234
	</view>
</template>

<script>
	export default {
		data() {
			 return {
			            background: ['color1', 'color2', 'color3'],
			            indicatorDots: true,
			            autoplay: true,
			            interval: 2000,
			            duration: 500
			        }
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.swiper {
			height: 300rpx;
			width: 100%;
			.swiper-item {
				display: block;
				height: 300rpx;
				line-height: 300rpx;

				text-align: center;
				border:1rpx solid #EC3232;
			}
		}
		
	.uni-bg-red{
     background: #EC3232;
	}	
		
</style>

不显示的原因是   要给swiper 一个  宽度   uniapp 文档中  并没有给出  所以不显示

效果图

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐