zhangsiye/mini/components/SwiperBox/index.vue

<template>
  <view class="swiper-box" :style="{height: height}">
    <u-swiper
      :list="list"
      :height="height"
      :radius="radius"
      style="width: 100%"
      :indicator="true"
      :show-title="true"
      indicator-mode="dot"
      :indicator-style="{bottom: '24rpx'}"
      @click="handleClick"
      @change="handleChange"
    >
      <view
        slot="indicator"
        class="indicator"
      >
        <view
          v-for="(item, index) in list"
          :key="index"
          class="indicator__dot"
          :class="[index === currentNum && 'indicator__dot--active']"
        />
      </view>
    </u-swiper>
  </view>
</template>

<script>

export default {
  name: 'SwiperBox',
  props: {
    height: {
      type: [Number, String],
      default: '330rpx'
    },
    radius: {
      type: [Number, String],
      default: '10rpx'
    }
  },
  data() {
    return {
      list: [
        'https://cdn.uviewui.com/uview/swiper/swiper1.png',
        'https://cdn.uviewui.com/uview/swiper/swiper2.png',
        'https://cdn.uviewui.com/uview/swiper/swiper3.png'
      ],
      currentNum: 0
    }
  },
  computed: {
  },
  created() {
    this.getSwiper()
  },
  methods: {
    handleClick(index) {
      const item = this.list[index]
      console.log('-->data', item)
    },
    handleChange(e) {
      this.currentNum = e.current
    },
    getSwiper() {
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-box{
    margin: 20rpx 0;
    .indicator {
      display: flex;
      flex-direction: row;
      justify-content: center;

      &__dot {
        height: 20rpx;
        width: 20rpx;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 10px;
        transition: background-color 0.3s;

        &--active {
          background-color: #6EEBE8;
        }
      }
    }
  }
</style>