正确的应用姿态:
装置(指定版本)
npm install vue-awesome-swiper@3 --save-dev
应用办法
<template> <div class="recommendPage"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div></template><script>// 引入插件import { swiper, swiperSlide } from "vue-awesome-swiper";import "swiper/dist/css/swiper.css";export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 pagination: { el: ".swiper-pagination", clickable: true //容许分页点击跳转 }, // 设置点击箭头 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" } } }; }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted() { // current swiper instance // 而后你就能够应用以后上下文内的swiper对象去做你想做的事了 console.log("this is current swiper instance object", this.swiper); // this.swiper.slideTo(3, 1000, false); }};</script><style scoped >.recommendPage .swiper-container{ position: relative; width: 100%; height: 200px; background: pink;} .recommendPage .swiper-container .swiper-slide{ width: 100%; line-height: 200px; background: yellowgreen; color: #000; font-size: 16px; text-align: center;}</style>