關於swiper插件在vue2的使用
最近做項目用到了vue-awesome-swiper，總結一下使用方法
第一步：安裝依賴
npm install swiper vue-awesome-swiper –save
or npm install swiper [email protected] –save
第二步：引入組件
import { swiper, swiperSlide } from “vue-awesome-swiper”;
import “swiper/dist/css/swiper.css”;
export default {
components: {
swiper,
swiperSlide,
},
第三步：創建容器：
第四步：創建配置對象
swiperOption: {
effect: “coverflow”,
grabCursor: true,
centeredSlides: true,
slidesPerView: “auto”,
coverflowEffect: {
rotate: 0,
stretch: -80, // slide左右距離
depth: 400, // slide前後距離
modifier: 0.5, //
slideShadows: false, // 滑塊遮罩層
},
loop: true,
on: {
click: function () {
// 監聽點擊滑塊事件// this.realIndex是當前swpier 實例的對象屬性
// console.log(this.realIndex); // 當前滑塊索引
},
slideChange: function () {
console.log(this.realIndex);
},
}, //on配置對象用來綁定swipet事件的回調
},
這裡主要swiper的一些監聽事件可以在on配置對象中綁定，此時的this是swiper本身
也可以通過下圖的方式綁定：
這種方式綁定如果想獲取到swiper對象，需要通過綁定ref然後通過：
this.$refs.myswiper.swiper來獲取
注意：this.$refs.myswiper.swiper.realIndex就是當前被激活滑塊的索引值。可以通過this.slides[realIndex]來獲取當前滑塊的內容
