swiper

swiper

<--swiper要设置一个高度-->
<swiper :current="cur" @change="swiperChange" style="width: 100%,height: 150px;">
  <-- swiper里面只能放swiper-item-->
  <swiper-item>
    <image src="https://s2.51cto.com/images/blog/202212/01/aa68bc8984d19f74a210c5b00b1d1f7f.png?x-oss-process=image/format,webp/ignore-error,1"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://s2.51cto.com/images/blog/202211/23/31cf4834d5a162c8c4589d8f68a63d03.png?x-oss-process=image/format,webp/ignore-error,1"></image>
  </swiper-item>
    <swiper-item>
    <image src="https://s2.51cto.com/images/blog/202212/02/a2fdc48b56c72f11a89dac0608ae5da4.jpg?x-oss-process=image/format,webp/ignore-error,1"></image>
  </swiper-item>
</swiper>

data {
  cur: 0,//默认为0
}

swiperChange(e) {
  console.log(e.detail.current);//e.deatil.current为当前swiper-item的索引
  this.cur = e.detail.current;//把索引赋值给cur使用
}