uniapp swiper 自定义指示点
时间: 2025-05-29 09:03:31 浏览: 35
### UniApp Swiper 自定义指示点
在 UniApp 中,Swiper 组件默认提供了简单的分页器样式。为了实现更复杂的自定义指示点效果,可以通过隐藏默认的 `indicator-dots` 并手动创建和控制指示点来完成。
#### 隐藏默认指示点并启用自定义逻辑
通过设置 `indicator-dots="false"` 来禁用内置指示点,并利用 `current` 属性获取当前索引,在页面中自行渲染指示点列表:
```html
<template>
<view class="swiper-container">
<!-- swiper组件 -->
<swiper :current="currentIndex" @change="onChange" indicator-dots="false">
<swiper-item v-for="(item, index) in items" :key="index">
<image :src="item.src"></image>
</swiper-item>
</swiper>
<!-- 自定义指示点区域 -->
<view class="custom-indicators">
<block v-for="(dot, idx) in items.length" :key="idx">
<view :class="[ currentIndex === idx ? 'active-dot' : 'inactive-dot']"></view>
</block>
</view>
</view>
</template>
```
#### 样式调整
对于上述模板中的 CSS 类名可以根据实际需求进行设计,下面是一个基础样式的例子:
```css
.custom-indicators {
display: flex;
justify-content: center; /* 对齐方式 */
}
.active-dot,
.inactive-dot {
width: 8px;
height: 8px;
margin: 0 4px;
border-radius: 50%;
}
.active-dot {
background-color: red; /* 当前激活状态的颜色 */
}
.inactive-dot {
background-color: gray; /* 默认未激活状态下颜色 */
}
```
#### JavaScript 控制逻辑
当滑动到不同图片时更新 `currentIndex` 的值,从而改变对应的指示点样式:
```javascript
export default {
data() {
return {
currentIndex: 0,
items: [
{ src: '/static/images/1.jpg' },
{ src: '/static/images/2.jpg' },
{ src: '/static/images/3.jpg' }
]
};
},
methods: {
onChange(event) {
this.currentIndex = event.detail.current;
}
}
};
```
阅读全文
相关推荐


















