uniapp中处理swiper轮播图

最新推荐文章于 2025-06-14 17:04:56 发布

zhangli0421

最新推荐文章于 2025-06-14 17:04:56 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 小程序

本文链接：https://blog.csdn.net/zhangli0421/article/details/125409496

本文介绍了在uniapp中处理swiper轮播图的方法，包括自定义组件避免与默认设置冲突，设置合适的高度，以及如何像在vue中一样注册和引入组件。如果拥有接口，可以通过v-for指令实现数据动态循环展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.自己写一个swiper组件，注意组件名最好不要用swiper，注意设置swiper的高度，因为他有默认，其实就和写小程序一样，不要慌。直接复制用就行了，要是你有接口，就改成v-for循环起来就可以了。

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image src="../../static/img/dy.jpg" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image src="../../static/img/dy.jpg" mode=""></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
</script>
<style>
	swiper{
		width: 100%;
		height: 400rpx;
	}
	.swiper-item image{
		width: 100%;
		height: 400rpx;
	}
	
</style>

2.注册组件并使用，哪里需要在哪里引入。就和vue中一样。

<template>
	<view class="index">
		<view class="f-active-color">
			首页
			<index-swiper&g

最低0.47元/天解锁文章

200万优质内容无限畅学