小程序：swiper自定义点的样式

背景

小程序原生的 swiper 需要定制点的样式，需要用以下类名来定制，不过我在官方并没有找到这些类名的出处，而是在其他博客中看到的，并且试验没有问题。

官方文档

类名称

.wx-swiper-dots：点容器样式
.wx-swiper-dots-horizontal：水平滑动点容器样式，经测试和.wx-swiper-dots效果相同。
.wx-swiper-dot：点样式
.wx-swiper-dot-active：active的点样式

注意

• 如果swiper是在一个组件内的话，写这些 class 是没有效果的，必须写到父元素或者全局里面。

示例

<style lang="less" scoped>
.result-img {
  width: 100%;
  height: 440rpx;
  overflow: hidden;
  position: relative;
  .img-swiper {
    width: 100%;
    height: 100%;
    .swiper-text {
      height: 44rpx;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 28rpx;
      font-size: 24rpx;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 44rpx;
      padding: 0 20rpx;
      position: absolute;
      z-index: 10;
      bottom: 88rpx;
      left: 32rpx;
    }
  }
}
</style>

<template>
  <div class="result-img">
    <swiper class="img-swiper" indicator-dots="{{imgList.length > 1}}" autoplay="{{false}}">
      <block v-for="(item, index) in imgList" :key="item.imgUrl">
        <swiper-item>
          <van-image :src="item.imgUrl" width="100%" height="100%" lazy-load use-loading-slot image-class="van-image" fit="widthFix" @tap="watchImg(imgList[index].imgUrl, imgList)">
            <van-loading slot="loading" type="spinner" size="20" vertical />
          </van-image>
          <block v-if="imgList.length > 1">
            <div class="swiper-text" v-if="index === 0">临床图</div>
            <div class="swiper-text" v-if="index === 1">皮肤镜图</div>
          </block>
        </swiper-item>
      </block>
    </swiper>
  </div>
</template>

<script>
import wepy from '@wepy/core'
wepy.component({
  props: {
    imgList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    watchImg (url, list) {
      const newList = list.map(item => {
        return item.imgUrl
      })
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: newList // 需要预览的图片http链接列表
      })
    }
  }
})
</script>

<config>
{
  "usingComponents": {
    "van-image": "~@/components/vant/image/index"
  }
}
</config>

父组件的样式

.wx-swiper-dots {
  margin-bottom: 70rpx;
  margin-left: 300rpx;
  // 为了给大家展示这个类名的范围
  background: #f00;
}
.wx-swiper-dot {
  background-color: #fff;
}
.wx-swiper-dot-active {
  width: 40rpx;
  border-radius: 10rpx;
}

效果