详细分析Uniapp中的轮播图基本知识（附Demo）

前言

先看代码示例：

实现了一个带有分页指示器的轮播图组件

<template><view class="work-container"><!-- 轮播图 --><uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content"><swiper class="swiper-box" :current="current" @change="changeSwiper" autoplay interval="3000"><swiper-item v-for="(item, index) in data" :key="index"><view class="swiper-item" @click="clickBannerItem(item)"><image :src="item.image" mode="aspectFill" :draggable="false" /></view></swiper-item></swiper></uni-swiper-dot></view>
</template><script>
export default {data() {return {current: 0,data: [{ image: '/static/images/banner/banner01.jpg' },{ image: '/static/images/banner/banner02.jpg' },{ image: '/static/images/banner/banner03.jpg' }]};},methods: {clickBannerItem(item) {console.info('Banner item clicked:', item);},changeSwiper(e) {this.current = e.detail.current;}}
};
</script><style lang="scss">.swiper-box {height: 150px;}.swiper-item {display: flex;justify-content: center;align-items: center;color: #fff;height: 300rpx;line-height: 300rpx;}@media screen and (min-width: 500px) {.uni-swiper-dot-box {width: 400px;margin: 0 auto;margin-top: 8px;}}
</style>

截图如下：

1. 基本知识

在 uni-app 中，<swiper> 组件是一个用于轮播图的基础组件，类似于其他前端框架中的 carousel

配合 <swiper-item>，可以实现多个页面、图片或内容的循环切换
uni-swiper-dot 组件用于为轮播图提供分页指示器（即小点）

<swiper> 组件：用于创建轮播图的组件

主要有以下几个常用属性：

• current：当前显示的 swiper-item 的索引
• autoplay：是否自动切换，布尔值
• interval：自动切换的时间间隔，单位为毫秒
• duration：滑动动画的时长，单位为毫秒
• circular：是否采用衔接滑动，即是否循环播放
• indicator-dots：是否显示面板指示点

事件

• change：轮播图滑动时触发，返回当前页的索引

<swiper-item> 组件：是 swiper 的子组件，用于定义每个可滑动的内容块
有一个 key 属性，用于唯一标识每一个 swiper-item

<uni-swiper-dot> 组件：一个为 swiper 提供分页指示器（小圆点）的组件，是 uni-app 的扩展组件
通过将分页指示器与 swiper 组件结合，可以为用户提供视觉提示，了解当前处于第几页

2. Demo

2.1 基本

简单的轮播图，包含 3 个图片项，开启了自动播放和指示点，间隔为 3 秒，动画时长为 500 毫秒

<template><swiperindicator-dotsautoplayinterval="3000"duration="500"><swiper-item><view class="swiper-item"><image src="https://example.com/image1.jpg" mode="aspectFill"></image></view></swiper-item><swiper-item><view class="swiper-item"><image src="https://example.com/image2.jpg" mode="aspectFill"></image></view></swiper-item><swiper-item><view class="swiper-item"><image src="https://example.com/image3.jpg" mode="aspectFill"></image></view></swiper-item></swiper>
</template><style scoped>
.swiper-item {width: 100%;height: 300px;
}
</style>

2.2 自定义分页

结合 uni-swiper-dot 实现自定义分页指示器

使用了 uni-swiper-dot 组件，自定义了轮播图的分页指示器。这里通过 @change 监听 swiper 的切换事件，动态更新当前页索引

<template><uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="currentIndex" field="content"><swiper class="swiper-box" :current="currentIndex" @change="changeSwiper" autoplay interval="3000"><swiper-item v-for="(item, index) in data" :key="index"><view class="swiper-item" @click="clickBannerItem(item)"><image :src="item.image" mode="aspectFill" /></view></swiper-item></swiper></uni-swiper-dot>
</template><script>
export default {data() {return {currentIndex: 0,data: [{ image: 'https://example.com/image1.jpg', content: 'Image 1' },{ image: 'https://example.com/image2.jpg', content: 'Image 2' },{ image: 'https://example.com/image3.jpg', content: 'Image 3' },],};},methods: {changeSwiper(e) {this.currentIndex = e.detail.current;},clickBannerItem(item) {console.log('Banner item clicked:', item);},},
};
</script><style scoped>
.swiper-box {height: 300px;
}
.swiper-item {display: flex;justify-content: center;align-items: center;height: 100%;
}
</style>

2.3 自定义动画

自定义了指示点的颜色，包括默认颜色和当前页的激活颜色，并且开启了 circular 选项实现循环播放

<template><swiperautoplayinterval="4000"duration="600"indicator-dotsindicator-color="rgba(255,255,255,0.6)"indicator-active-color="rgba(255,0,0,1)"circular><swiper-item v-for="(item, index) in images" :key="index"><view class="swiper-item"><image :src="item" mode="aspectFill"></image></view></swiper-item></swiper>
</template><script>
export default {data() {return {images: ['https://example.com/image1.jpg','https://example.com/image2.jpg','https://example.com/image3.jpg',],};},
};
</script><style scoped>
.swiper-item {height: 250px;background-color: #ccc;
}
</style>

3. 扩展

常见的功能扩展如下：

手动切换到指定页面，修改 current 变量可以手动切换到某一页

<template><swiper :current="current" @change="changeSwiper"><!-- swiper-item content here --></swiper><button @click="current = 1">切换到第二页</button>
</template><script>
export default {data() {return {current: 0,};},methods: {changeSwiper(e) {this.current = e.detail.current;},},
};
</script>

自定义指示器样式，通过 indicator-color 和 indicator-active-color 可以修改指示器颜色

<swiper :indicator-dots="true" indicator-color="rgba(0,0,0,.3)" indicator-active-color="#007aff"><!-- swiper-item content here -->
</swiper>