vue中使用swiper，不踩坑！

官网和百度的教程总是出错，应该是版本的原因，官网里的总是搞出错，所以我这边只用swiper4版本

命令行下输入 npm install swiper@4 --save安装

这里有一个坑，如果是git管理下的项目，需要在项目文件夹下打开git bash here

输入 npm install swiper@4 --save安装

swiper组件部分代码

<template>

  <div class="swiper-container filmswiper">

    <div class="swiper-wrapper">

    <slot></slot>

    </div>

    <!-- 如果需要分页器 -->

    <div class="swiper-pagination"></div>

  </div>

</template>

<script>

import Swiper from "swiper";

import "swiper/dist/css/swiper.min.css";

export default {

  mounted() {

    new Swiper(".filmswiper", {

      autoplay: {

        delay: 2000,

        //用户操作swiper之后，是否禁止autoplay。默认为true：停止，目前改为不停止

        disableOnInteraction: false,

      },

      loop: true,

      // 如果需要分页器

      pagination: {

        el: ".swiper-pagination",

        clickable: true,

      }, 

    });

  },

};

</script>

<style scoped>

/* 可以通过swiper里的类修改默认样式，目前修改的是小圆点的位置 */

.swiper-pagination{

  text-align: right;

}

</style>

 

其他组件需要引用swiper时的代码

注意此处我用的反向代理跨域请求的数据渲染

  

 <myswiper :key="data_list.length">

      <div class="swiper-slide" v-for="list in data_list" :key="list.id">

        <img :src="list.img" />

      </div>

    </myswiper>

<script>

import myswiper from "@/components/Swiper";

import axios from "axios";

export default {

  name: "NowPlaying",

  data() {

    return {

      data_list: [],

    };

  },

  components: { myswiper },

  mounted() {

    axios.get("/hotel/mustTry?city=nanjing").then((res) => {

      this.data_list = res.data.data;

    });

  },

};

</script>