Vue中如何实现轮播图的示例代码
编程学习 2021-07-04 18:32www.dzhlxh.cn编程入门
本篇文章主要介绍了Vue中如何实现轮播图的示例代码，长沙网络推广觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随长沙网络推广过来看看吧
这个功能我感觉在任何项目中都会涉及到，今天我就把我的实现方法跟大家分享一下，有不对的地方还请指出，我好更新。
狼蚁网站SEO优化是整体代码，我把轮播图单独做了一个组件，大家可以拿来就用，具体代码如下：
<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>
//狼蚁网站SEO优化我们引用两个插件，当然，在使用之前请先安装
//安装方法：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>
以上就是实现轮播图的全部代码，有兴趣的朋友可以试试看啦，希望大家继续关注我们的网站!想要学习VUE的可以继续关注本站。