您的位置：首页 > Web前端 > Vue.js

Vue中如何实现轮播图的示例代码

2017-07-27 09:15 1006 查看

这个功能我感觉在任何项目中都会涉及到，今天我就把我的实现方法跟大家分享一下，有不对的地方还请指出，我好更新。

下面是整体代码，我把轮播图单独做了一个组件，大家可以拿来就用，具体代码如下：

<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">![](item.i_url)</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>

以上就是实现轮播图的全部代码，有兴趣的朋友可以试试看啦，希望大家继续关注我们的网站!想要学习VUE的可以继续关注本站。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue 轮播图

相关文章推荐

新的分享

章节导航