1、先准备好一个api接口 http://www.jb51.cc/api/home/slider
2、安装插件 cnpm install --save axios
3、api/slider.js
import axios from 'axios'; //获取幻灯片数据 ajax export const getSliders=()=>{ return axios.get('http://www.jb51.cc/api/home/slider').then(res=>{ if(res.data.code===0){ console.log(res.data.slider); return res.data.slider;返回是数据 } throw new Error('没有成功获取到数据'); }).catch(err=>{ console.log(err); 错误处理 return [{ linkUrl:'www.baidu.com',picUrl:require('assets/img/404.png') }] }); }
4、在 components/slider/index.vue中引入该方法
<template> <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(slider,index) in sliders" :key="index"> <a :href="slider.linkUrl"> <img :src="slider.picUrl"> </a> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </template> <script> import { Swiper,SwiperSlide } from 'vue-awesome-swiper'; import 'swiper/css/swiper.css'; import { getSliders } from 'api/slider'; export default { name:"Slider" { sliders:[],swiperOptions: { spaceBetween: 30truefalse },loop: '.swiper-button-prev' } } } },created(){ 一般在created里获取远程数据 this.getSliders(); },computed: { swiper() { return .$refs.mySwiper.$swiper; } },mounted() { console.log('Current Swiper instance object',this.swiper); this.swiper.slideTo(3,1000,); },methods:{ getSliders(){ return getSliders().then(data=>{ console.log(data); this.sliders=data; }); } } } </script> <style lang="scss" scoped> .swiper-container{ width:100%; height:180px; } .swiper-slide a{ display:block; width:100%; height:100%; & img{ width:100%; height:100%; } } </style>
效果图