vue2+vant+h5中轮播图van-swipe指示器样式更改

最新推荐文章于 2024-04-09 16:56:08 发布

Jolly_zhang

最新推荐文章于 2024-04-09 16:56:08 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue2 H5 CSS 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/Jolly_zhang/article/details/134852200

Vue2 同时被 3 个专栏收录

22 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了如何在Vue的van-swipe组件中，当默认指示器样式不符合UI设计需求时，如何修改整体样式和单个指示器样式，包括自定义颜色、大小和间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
组件默认指示器样式是圆点，有的时候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>