封装组件如下swiper.vue
<template>
<div class="wapper">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="item in imgList" :key="item.id">
<img :src="item.img" alt="">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
name: 'Swiper',
data() {
return {
imgUrl: require('../../../assets/imgs/ceshi.jpg'),
imgList: [],
swiperOption: {
pagination: {
el: '.swiper-pagination',
},
init: false,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted() {
this.img()
},
updated() {
console.log(this.imgList);
if (this.imgList.length > 1) {
console.log(this.swiper);
this.swiper.init();
}
},
methods: {
//获取轮播图
img: function () {
this.$post('Mall/banner')
.then((response) => {
console.log(response.obj)
if (response.code == 1) {
this.imgList = response.obj
}
})
}
},
components: {
swiper,
swiperSlide
}
}
</script>
<style lang="stylus" scoped>
.wapper
width 100%;
height 430px;
.wapper swiper-slide
width 100%;
height 430px;
.wapper img
width 100%;
height 430px;
</style>
main.js
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
安装
npm install vue-awesome-swiper