VUE移动端H5学习vant-van-swipe轮播组件自定义横线指示器

效果图

image.png

如图所示，vant只提供了原始的圆点样式指示器，可以自定义颜色等属性，但没办法修改形状。，引用vant样式可以看到如下less设置方法：

 &__indicator {
    width: @swipe-indicator-size;
    height: @swipe-indicator-size;
    background-color: @swipe-indicator-inactive-background-color;
    border-radius: 100%;
    opacity: @swipe-indicator-inactive-opacity;
    transition: opacity @animation-duration-fast,
      background-color @animation-duration-fast;

    &:not(:last-child) {
      margin-right: @swipe-indicator-size;
    }

    &--active {
      background-color: @swipe-indicator-active-background-color;
      opacity: @swipe-indicator-active-opacity;
    }
  }

样式中宽高都用的一个值，那就没办法通过修改样式自定义方法处理了。
有两种方法可以处理：
一：采用样式自定义直接替换less样式；但这样会统一修改，不便于个性化处理；
二：采用插槽方式自定义指示器
可以采用ul无序列表自定义指示器(指示器数据来源和轮播相同)：

js部分：

data() {
return {
  list: [],
}
},
methods: {
  checkActive(index) {
              return index === this.current;// current为监听的轮播index
          },
}

less样式，借用vant样式方案：

.indicators {
  position: absolute;
  bottom: 5px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);

}

.indicator li {
  display:inline;
  width: 12px;
  height: 3px;
  background-color: white;
  border-radius: 20%;
  opacity: 0.3;
  transition: opacity 0.5s,//@animation-duration-fast
  background-color 0.5s;//@animation-duration-fast

  &:not(:last-child) {
    margin-right: 6px;
  }

  &.active {
    background-color: white;
    opacity: 1;
  }
}

到此就实现了自定义插槽指示器样式