✅ 轻量、高性能轮播插件。目前支持 无缝衔接自

觉得好用给一个 star 哦~

npm i vue-swiper-component --save cnpm i vue-swiper-component --save //国内镜像 Usage

import { Swiper, Slide } from 'vue-swiper-component'; components: { Swiper, Slide } //异步加载轮播图的情况; <Swiper v-if="list.length > 0"> <Slide v-for="(item,index) in list" :key="index"> </Slide> </Swiper> //同步加载轮播图情况 <Swiper> <Slide> 1 </Slide> <Slide> 2 </Slide> <Slide> 3 </Slide> </Swiper> //加一些参数配置情况 <Swiper v-if="slidesReal.length > 0" :autoPlay='true' :showIndicator='true' interval="2500" duration="500"> <Slide @click="clickMe" v-for="(item,index) in slidesReal" :key="index"> //添加click事件 </Slide> </Swiper> API

✅ Swiper 上面还暴露了其他方法,在 Swiper 标签上添加 ref 属性, 例如: <Swiper ref="swiper"></Swiper> ✅ this.$refs.swiper.prevSlide(); // 上一张图    ✅ this.$refs.swiper.nextSlide(); // 下一张图 ✅ this.$refs.swiper.slideTo(2); //某一张图 事件

transtionend 事件 每次轮播出发 参数表示轮播到第几个图片 在Swiper上添加 // @transtionend="getNum"   getNum(data) {console.log(data);} click 事件 每个轮播图上的事件 Other 可以通过覆盖我的样式进行自定义样式，Slide 标签里面可以写 div 或者其他的东西 一些参数配置可以参考上面 Usage 第三个示例，异步渲染要加 v-if 保证渲染成功 参考第一个示例 如果其他问题可以邮箱沟通，zwhcoder@gmail.com; 暂时对 PC 支持不是很友好，等以后有时间了可以加上;