官方文档里,swiper的指示点默认是圆形,且只能修改其颜色。如果要修改形状,有两种思路:
1.隐藏官方的面板指示点(官方有提供属性可以隐藏),自己用view重写组件 (个人觉得这个比较麻烦 此篇文章不做讲解)
2.弄清swiper里控制指示点的类,并对其中样式进行修改。
第二种方法怎么修改指示点样式呢?
首先 : 我们需要了解几个class swiper里控制指示点的类
1.wx-swiper-dot 指示点的类名
2.wx-swiper-dot-active 当前指示点的类名
有了这两个类名 改变颜色样式啥的就比较简单了
废话不多说 上代码
<template>
<swiper circular="true" class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<block v-for="(item, index) in imgList" :key="index">
<swiper-item>
<image :src="item" class="slide-image" mode="aspectFill"/>
</swiper-item>
</block>
</swiper>
</template>
<script>
export default {
data () {
return {
indicatorDots: true, // 是否显示面板指示点
autoplay: true, // 是否自动切换
interval: 5000, // 自动切换时间间隔
duration: 500 // 滑动动画时长
}
},
props: ['imgList']
}
</script>
<style lang="scss" scoped>
.swiper {
width: 690rpx !important;
height: 270rpx !important;
margin: 0 auto;
}
image {
height: 100%;
width: 100%;
}
// 指示点样式
.swiper /deep/ .wx-swiper-dot{
height: 12rpx;
width: 12rpx;
background: rgba(255, 255, 255, .6)
}
// 当前指示点样式
.swiper /deep/ .wx-swiper-dot-active{
width: 36rpx;
height: 12rpx;
border-radius: 6rpx;
background: rgba(255, 255, 255, .8)
}
</style>
.