vue中Swiper轮播分发

 父组件：AswiperDemo.vue

<template>
  <div class="content">
    <div class="head">
      <img src="./images/2.jpg" alt="" class="head_img" />
    </div>
    <div>
      <div class="text_line">
        <span class="swiper_one">{{ one }}</span>
        <Aswiper
          :autoplay="1000"
          :images="images1"
          @onChange="onChange"
          :type="1"
        />
      </div>
      <div class="text_line">
        <span class="swiper_two">{{ two }}</span>
        <Aswiper
          :autoplay="1100"
          :images="images2"
          @onChangeTwo="onChangeTwo"
          :type="2"
        />
      </div>
      <div class="text_line">
        <span class="swiper_three">{{ three }}</span>
        <Aswiper
          :autoplay="300"
          :images="images3"
          @onChangeThree="onChangeThree"
          :type="3"
        />
      </div>
      <div class="text_line">
        <span class="swiper_four">{{ fours }}</span>
        <Aswiper
          :autoplay="490"
          :images="images4"
          @onChangeFour="onChangeFour"
          :type="4"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Aswiper from './Aswiper'
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
Vue.use(Swipe).use(SwipeItem).use(Lazyload);


export default {
  name: "AswiperDemo",
  components: { Aswiper },
  data () {
    return {
      images1: [
        {
          img: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          text: '111发送中1',
        },
        {

          img: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
          text: '111匹配中1',
        }
      ],
      images2: [
        {
          img: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          text: '222发送中2',
        },
        {

          img: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
          text: '222匹配中2',
        }
      ],
      images3: [
        {
          img: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          text: '333发送中3',
        },
        {

          img: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
          text: '333匹配中3',
        }
      ],
      images4: [
        {
          img: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
          text: '444发送中4',
        },
        {

          img: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
          text: '444匹配中4',
        }
      ],
      one: '',
      two: '',
      three: '',
      fours: '',
    }
  },
  methods: {
    onChange (t) {
      this.one = t
      console.log(t, this.one, 'tt')
    },
    onChangeTwo (t) {
      console.log(t, 'tt2')
      this.two = t
    },
    onChangeThree (t) {
      console.log(t, 'tt')
      this.three = t
    },
    onChangeFour (t) {
      console.log(t, 'tt')
      this.fours = t
    },
  }

}
</script>

<style scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.head {
  display: flex;
}
.head_img {
  width: 300px;
  height: 358px;
  border-radius: 50%;
}
.text_line {
  display: flex;
}

.swiper_one {
  position: absolute;
  top: 84px;
  left: 93px;
  color: red;
  transform: rotate(-30deg);
}
.swiper_two {
  position: absolute;
  top: 129px;
  left: 123px;
  color: red;
  transform: rotate(-6deg);
}
.swiper_three {
  position: absolute;
  top: 165px;
  left: 123px;
  color: red;
  transform: rotate(5deg);
}
.swiper_four {
  position: absolute;
  top: 213px;
  left: 110px;
  color: red;
  transform: rotate(30deg);
}
</style>

子组件：Aswiper.vue

<template>
  <div class="swiper_con">
    <van-swipe class="my-swipe" :autoplay="autoplay" @change="onChange">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img v-lazy="item.img" class="img" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
Vue.use(Swipe).use(SwipeItem).use(Lazyload);


export default {
  name: "Aswiper",
  props: {
    autoplay: {
      type: Number,
      default: '1000'
    },
    images: {
      tyep: Array,
      default: []
    },
    type: {
      type: Number,
      default: '1'
    },

  },
  data () {
    return {
    }
  },
  methods: {
    onChange (index) {
      console.log(index, this.type, 'index')
      for (let i = 0; i < this.images.length; i++) {
        if (i == index && this.type == 1) {
          this.$emit('onChange', this.images[i].text);
        }
        if (i == index && this.type == 2) {
          console.log(this.images[i].text, '2钉钉')
          this.$emit('onChangeTwo', this.images[i].text);
        }
        if (i == index && this.type == 3) {
          this.$emit('onChangeThree', this.images[i].text);
        }
        if (i == index && this.type == 4) {
          this.$emit('onChangeFour', this.images[i].text);
        }
      }
    },
  }

}
</script>

<style scoped>
.swiper_con {
  width: 88px;
  height: 88px;
}
.my-swipe .van-swipe-item {
  width: 88px;
  height: 88px;
  color: #fff;
}
.img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}
</style>