vue封装组件swiper轮播组件

1.引入swiper（这里引入的是5.4.1版本）

在cmd命令行

cnpm install --save swiper@5.4.1

2.Swiper组件的封装(封装方法参考swiper官网)

//===>src/views/Film/Swiper.vue 

                    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"      }    });  }};.swiper-wrapper {  img {    width: 100%;    height: 200px;  }}.film-swiper-pagination {  text-align: right;}

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

轮播图数据

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

//===>src/views/Film.vue 

                                film-header      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;    });  }};

效果

作者：小二的学习日记

链接：https://www.jianshu.com/p/c161f90156d1

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。