uniapp——轮播图（官方）、卡片轮播图

最新推荐文章于 2026-06-19 19:45:56 发布

原创

最新推荐文章于 2026-06-19 19:45:56 发布 · 1.5w 阅读

收录于

本文介绍了三种不同风格的轮播图实现方式，包括基础轮播图、带自定义指示器的轮播图及卡片式轮播图，并提供了完整的代码示例。

一、轮播图（官方）

在这里插入图片描述

代码：

<template>
	<view class="content">
		<!-- <cu-custom bgColor="bg-gradual-blue">
			<block slot="content">个人技能</block>
		</cu-custom> -->
		<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item, index) in info" :key="index">
				<view :class="item.colorClass" class="swiper-item">
					<image class="image" :src="item.url" mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
   
   
		data() {
   
   
			return {
   
   
				
				indicatorDots: true,
				autoplay: true,
				interval: 2000,//切换的间隔时间
				duration: 500,//滑动动画时长


				info: [{
   
   
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
   
   
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',