微信小程序自定义修改轮播图swiper指示器的样式

最新推荐文章于 2024-09-06 15:25:06 发布

一键写代码

最新推荐文章于 2024-09-06 15:25:06 发布

阅读量1.2k

点赞数 2

分类专栏： vue 小程序前端技术积累

本文链接：https://blog.csdn.net/qq_42991509/article/details/118521231

版权

前端技术积累同时被 3 个专栏收录

160 篇文章 9 订阅

订阅专栏

vue

89 篇文章 7 订阅

订阅专栏

小程序

21 篇文章 0 订阅

订阅专栏

默认的小程序轮播图组件样式是圆点点。

有时候UI需要改指示器的样式
使用：


      <swiper :autoplay="false" :indicator-dots="true">
           <swiper-item class="menu" v-for="(cMenu,index) in menuCList">
              <div class="menu-item" v-for="item in cMenu" @tap="linkToList(item)"> 
                <img class="menu-img" :src="item.attr_image_url" />
              </div>
          </swiper-item>
      </swiper>

样式覆盖：

  // 菜单
  .menu-wrap {
    .wx-swiper-dot{
      background-color:#b9b9b9;
      height: 8rpx;
      width: 10rpx;
      border-radius: 50%;
    }
    .wx-swiper-dot.wx-swiper-dot-active{
      background-color:#f55f66;
      height: 8rpx;
      width: 20rpx;
      border-radius: 20rpx;
    }
    .wx-swiper-dots.wx-swiper-dots-horizontal {
      margin-bottom: -8rpx;
    }
  }

.wx-swiper-dot默认小圆点
.wx-swiper-dot.wx-swiper-dot-active 小圆点激活样式

我们还可以通过.wx-swiper-dots.wx-swiper-dots-horizontal来调整位置

譬如另外一个示例：

.wx-swiper-dots {
    position: relative;
    left: unset !important;
    right: 0;
}

.wx-swiper-dots.wx-swiper-dots-horizontal {
    margin-bottom: -5rpx;
}