06.项目轮播swiper组件

Swiper官网：https://www.swiper.com.cn/
1.引入swiper（这里引入的是5.4.1版本）
在cmd命令行
cnpm install --save swiper@5.4.1
2.Swiper组件的封装(封装方法参考swiper官网)

//===>src/views/Film/Swiper.vue
<template>
  <div class="swiper-container filmswiper">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination film-swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  mounted() {
    console.log("swiper-mounted");
    new Swiper(".filmswiper", {
      loop: true,
      autoplay: {
        delay: 2000
      },
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.swiper-wrapper {
  img {
    width: 100%;
    height: 200px;
  }
}
.film-swiper-pagination {
  text-align: right;
}
</style>

3.在Film组件中使用swiper，并为轮播图赋值

轮播图数据

这里 给swiper设置key的目的是，因为网络请求是异步的，swiper组件在mounted生命周期中先初始化了，此时swiper里面并没有数据。当请求数据回来的时候，系统认为swiper没有变化，所以不会刷新布局，导致swiper组件的展示出现一些bug。所以添加key组件，当looplist的长度发生改变时，系统通过diff算法，来刷新swiper。

//===>src/views/Film.vue
<template>
  <div>
    <swiper :key="looplist.length">
      <div class="swiper-slide" v-for="data in looplist" :key="data">
        <img :src="data" />
      </div>
    </swiper>
    <div>film-header</div>
    <router-view></router-view>
  </div>
</template>

<script>
import swiper from "@/views/Film/Swiper";
import axios from "axios";
export default {
  data() {
    return {
      looplist: []
    };
  },
  components: {
    swiper
  },
  mounted() {
    axios({
      url: "https://m.maizuo.com/gateway?filmId=4837&k=9593174",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
        "X-Host": "mall.film-ticket.film.info"
      }
    }).then(res => {
      console.log(res.data);
      this.looplist = res.data.data.film.photos;
    });
  }
};
</script>

<style lang="sass" scoped>

</style>

效果