jichuangshe/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%', backgroundPosition: 'center'}"
      :indicator="true"
      :show-title="true"
      indicator-mode="dot"
      :indicator-style="{bottom: '24rpx'}"
      @change="handleChange"
      @click="handleClick"
    >
      <view
        slot="indicator"
        class="indicator"
      >
        <view
          v-for="(item, index) in list"
          :key="index"
          class="indicator__line"
          :style="{
            width: `${(380 / list.length)}rpx`
          }"
          :class="[index === currentNum && 'indicator__line--active']"
        />
      </view>
    </u-swiper>
  </view>
</template>

<script>

export default {
  name: 'SwiperBox',
  props: {
    height: {
      type: [Number, String],
      default: '330rpx'
    },
    radius: {
      type: [Number, String],
      default: '0rpx'
    },
    type: {
      type: String,
      default: 'login'
    }
  },
  data() {
    return {
      loading: true,
      list: [],
      original: [],
      currentNum: 0
    }
  },
  computed: {
  },
  created() {
    this.getSwiper()
  },
  methods: {
    handleChange(e) {
      this.currentNum = e.current
    },
    getSwiper() {
      const method = this.type === 'login' ? 'loginBanner' : 'indexBanner'
      this.$api.setting[method]().then(res => {
        this.loading = false
        this.original = res.data
        res.data.forEach(obj => {
          this.list.push(obj.image)
        })
      })
    },
    handleClick(index) {
      const data = this.original[index]
      this.$emit('click', data)
    }
  }
}
</script>

<style lang="scss" scoped>
  .swiper-box{
    margin: 20rpx 0;
    border-radius: 8rpx;
    &.loading{
      background-color: #FFFFFF;
    }
    .indicator {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin-bottom: 10%;

      &__line {
        height: 1rpx;
        width: 50rpx;
        background-color: rgba(255, 255, 255, 0.7);
        transition: background-color 0.3s;
        border-radius: 5rpx;

        &--active {
          height: 8rpx;
          margin-top: -4rpx;
          background: #fff;
        }
      }
    }
  }
</style>