组件默认指示器样式是圆点,有的时候ui设计的并不是,此时就需要我们去更改样式。或者自定义指示器了。
<template>
<div class="home-page">
<van-swipe :loop="false">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
</van-swipe>
</div>
</template>
...
<style lang="less" scoped>
/deep/ .van-swipe{
width:700px;
height:150px;
line-height: 150px;
color: #fff;
font-size: 20px;
text-align: center;
background-color: #001f32;
// 指示器整体样式
&__indicators {
left:8%;
}
// // 单个指示器样式,默认opacity: 0.3;
&__indicator {
background-color: #B5BBDA;
border-radius: 0%;
//指示器间距
&:not(:last-child) {
margin-right: 10px;
}
// 选中的指示器样式,也可在标签中直接加indicator-color="white"
&--active {
background-color:#B5BBDA;
width:20px;
opacity:1;
}
}
}
</style>