Vue使用Swiper组件

Vue使用Swiper横向轮播图组件的使用流程以及避坑指南

目录

Vue使用Swiper横向轮播图组件的使用流程以及避坑指南

安装

引入

使用

---

安装

因为swiper每个版本使用方法不一样，这里使用相对稳定的版本使用

使用指定版本安装

npm install vue-awesome-swiper@3.1.3 -S

或者

cnpm install vue-awesome-swiper@3.1.3 -S

引入

// 引入swiper插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

使用

swiperOption  是swiper的一些设置：

pagination  小圆点

swiper-button-pre    swiper-button-pre   左右切换箭头

<template>
  <div class="swiper-main">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img :src="item.imgUrl" alt="" />
      </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 {
  name: "Swiper",
  props: {
    swiperList: Array, // 注意此处我的数据是由接口返回的数据
  },
  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>
.swiper-main {
  width: 100%;
  height: 4.4rem;
}
.swiper-container {
  width: 100%;
  height: 4.4rem;
}
.swiper-container img {
  width: 100%;
  height: 4.4rem;
}
::v-deep .swiper-pagination-bullet-active {
  background-color: #b0352f;
}
</style>

最后

小修狗希望能帮到您