uniapp实现轮播图

最新推荐文章于 2024-07-25 08:54:13 发布

垫脚摸太阳

最新推荐文章于 2024-07-25 08:54:13 发布

阅读量950

点赞数 11

分类专栏：小程序文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/m0_62600503/article/details/134836523

版权

小程序专栏收录该内容

10 篇文章 0 订阅

订阅专栏

so easy!

<template>
	<view class="content">
		<H2>{{title}}</H2>
		<view class="banner">
		   <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"
		   indicator-active-color="#fff" circular autoplay interval="4000">
		   <swiper-item><image src="/static/img/sights/1.png"></image></swiper-item>
		   <swiper-item><image src="/static/img/sights/2.png"></image></swiper-item>
		   <swiper-item><image src="/static/img/sights/3.png"></image></swiper-item>
		   </swiper>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'uniapp实现轮播图'
		};
	},
	onLoad() {},
	methods: {}
};
</script>

<style>
.content {
	text-align: center;
	height: 400upx;
	margin-top: 200upx;
	
	.banner{
	  width: 100%;
	  height: 350rpx;
	}
	.banner swiper{
	  height: 100%;
	  width: 100%;
	}
	.banner image{
	  width: 100%;
	  height: 350rpx;
	}
	

}
</style>