vue-awesome-swiper 在vue 项目中的使用

在vue 项目中使用swiper轮播，找到个vue-awesome-swiper的组件，下面介绍下如何正确使用该组件：

1.安装改组件

cnpm i vue-awesome-swiper@3 -S

这个下载的版本是"vue-awesome-swiper": "^3.1.3"

2.在需要使用切换的界面引入该组件

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable:true
        },
        /* 是否循环 */
        loop: true,
        autoplay: {
          /* 触碰后自动切换是否停止 */
          disableOnInteraction: false,
        },
      },
    };
  },
  methods: {},
};
</script>

3.在页面中使用改组件

   <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img
          class="swiper-img"
          src="http://img1.qunarzz.com/piao/fusion/1811/b4/ac00a771d74f5a02.jpg_750x200_a71cff60.jpg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="swiper-img"
          src="http://img1.qunarzz.com/piao/fusion/1710/15/898d6d74e9b06202.jpg_750x200_89b4509e.jpg"
          alt=""
        />
      </swiper-slide>
      <swiper-slide>
        <img
          class="swiper-img"
          src="http://img1.qunarzz.com/piao/fusion/1809/2d/0d7dc3400a50b502.jpg_750x200_4ca95dd4.jpg"
          alt=""
        />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

 

完毕！！！ 可以尝试试用下