[JavaScript知识库]nuxt——swiper的使用

装包

bug：装包报错，或者引入报错，是版本的为题，降低版本即可解决

"swiper": "^4.0.7",
"vue-awesome-swiper": "^3.1.3"

页面中使用

<div>
		<swiper
          ref="mySwiper"
          :options="swiperOptions"
          style="width: 200px; height: 200px"
        >
          <swiper-slide
            v-for="item in 5"
            :key="item"
            style="height: 200px; background: blue"
          >
            11
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
</div>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  data() {
    return {
      swiperOptions: {
        loop: true,
        slidesPerView: 3, // 一屏3个
        centeredSlides: false, // 第一个默认居左
        spaceBetween: 70, // 间隔
        autoplay: true, // 自动播放
        grabCursor: true, // 鼠标放上去显示小手
        pagination: {  // 分页
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        on: {
          slideChange() {
            console.log("onSlideChangeEnd", this);
          },
          tap() {
            console.log("onTap", this);
          },
        },
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
};
</script>