Vue轮播组件,详情参见: awesome-swiper
- vue项目中安装awsome-swiper组件: npm install [email protected] --save
(@2.6.7是组件的版本号) - 全局使用swiper插件,需要在main.js文件中引入swiper插件
import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)
- 轮播组件
<template> <div class="wrapper"> <swiper :options="swiperOption" v-if="showSwiper"> <swiper-slide v-for="item of list" :key="item.id"> <img class="swiper-img" :src="item.imgUrl"/> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> export default{ name: 'HomeSwiper', props: { list: Array }, data () { return { swiperOption: { pagination: '.swiper-pagination', loop: true } } }, computed: { showSwiper () { return this.list.length } } } </script> <style lang="stylus" scoped> .wrapper >>> .swiper-pagination-bullet-active background: #fff !important .wrapper overflow: hidden width: 100% height: 0 padding-bottom: 26.67% .swiper-img width: 100% background: #eee </style>
- 父组件引入轮播插件,并完善swiperList对象数组(JSON格式)
<template> <div> <home-swiper :list="swiperList"></home-swiper> </div> </template> <script> import HomeSwiper from './components/Swiper' export default{ name: 'Home', components: { // 声明组件 HomeSwiper: HomeSwiper }, data () { return { swiperList: [], } } } </script>