## 轮播组件的使用 [vue-awesome-swiper](https://github.com/surmon-china/vue-awesome-swiper) [文档](https://www.swiper.com.cn/api/pagination/299.html) ~~~ npm install vue-awesome-swiper --save ~~~ `main.js`配置 ~~~ import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) ~~~ `Swiper`配置 ***** >[warning]`:options="swiperOption"`传递轮播相关设置，如是否循环等 ~~~ <template> <div class="wrapper"> <swiper :options="swiperOption"> <!-- slides --> <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> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-scrollbar" slot="scrollbar"></div> </swiper> </div> </template> ~~~ **** ~~~ <script> export default { name: "HomeSwiper", data() { return { swiperOption: { pagination: { el: ".swiper-pagination"， /*将分页转成数字*/ type: "fraction" }, /* 是否循环 */ loop: true, autoplay: { /* 触碰后自动切换是否停止 */ disableOnInteraction: false } /*解决分页乱码*/ observer:true, observeParents:true }, swiperList: [] }; } }; </script> ~~~ ~~~ <style scoped> .swiper-img { width: 100%; height: 300px; } //深度作用选择器 //如果你希望 scoped 样式中的一个选择器能够作用得"更深",例如影响子组件，你可以使用 >>> 操作符： .wrapper >>> .swiper-pagination-bullet-active { background: #fff !important; } </style> ~~~