zhangsiye/mini/components/SwiperBox/index.vue

<template>
  <view
    class="swiper-box "
    :class="{
      loading:loading,
      'main-center':loading,
      'cross-center': loading
    }"
    :style="{height: height}"
  >
    <u-loading-icon :show="loading" vertical />
    <u-swiper
      v-if="list.length"
      :list="list"
      :height="height"
      :radius="radius"
      style="width: 100%;"
      :bg-color="$colors.bgColor"
      :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 {
      loading: true,
      list: [],
      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() {
      this.$api.setting.banner().then(res => {
        this.loading = false
        res.data.forEach(obj => {
          this.list.push(obj.image)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-box{
    margin: 20rpx 0;
    border-radius: 8rpx;
    &.loading{
      background-color: #1B203C;
    }
    .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>