这个功能我感觉在任何项目中都会涉及到，今天我就把我的实现方法跟大家分享一下，有不对的地方还请指出，我好更新。
下面是整体代码，我把轮播图单独做了一个组件，大家可以拿来就用，具体代码如下：
<template>
<div class="content">
<div class="focus">
<!-- focus begin -->
<swiper :options="swiperOption">
<!-- map是数组 这里我们用v-for把数据循环出来 -->
<swiper-slide v-for="item in map">
<a :href="item.i_route" rel="external nofollow" target="_blank"></a>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<!-- focus end -->
</div>
</div>
</template>
<script>
//下面我们引用两个插件，当然，在使用之前请先安装
//安装方法：npm install vue-awesome-swiper --save
import VueAwesomeSwiper from 'vue-awesome-swiper'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data() {
return {
swiperOption: {
autoplay: 5000,
initialSlide: 1,
loop: true,
pagination: '.swiper-pagination',
paginationClickable: true,
onSlideChangeEnd: swiper => {
//console.log('onSlideChangeEnd', swiper.realIndex)
}
}
}
},
mounted () {
this.bannerInfo();
},
components: {
swiper,
swiperSlide
},
methods: {
//轮播图初始化
bannerInfo() {
//通过接口获取图片数据
this.$fetch('get/image/list').then(res => {
if(res.errCode == 200) {
this.map = res.errData;
}
});
}
}
}
</script>
下载本文