1、先准备好一个api接口

2、安装插件 cnpm install --save axios

3、api/slider.js

import axios from 'axios';

//获取幻灯片数据 ajax

export const getsliders=()=>{

return axios.get('http://www.imooc.com/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中引入该方法

import { swiper, swiperslide } from 'vue-awesome-swiper';

import 'swiper/css/swiper.css';

import { getsliders } from 'api/slider';

export default {

name:"slider",

title: 'autoplay',

components:{

swiper,

swiperslide

},

data() {

return {

sliders:[],

swiperoptions: {

spacebetween: 30,

centeredslides: true,

autoplay: {

delay: 2500,

disableoninteraction: false

},

loop: true,

pagination: {

el: '.swiper-pagination',

clickable: true

},

navigation: {

nextel: '.swiper-button-next',

prevel: '.swiper-button-prev'

}

}

}

},

created(){

//一般在created里获取远程数据

this.getsliders();

},

computed: {

swiper() {

return this.$refs.myswiper.$swiper;

}

},

mounted() {

//console.log('current swiper instance object', this.swiper);

this.swiper.slideto(3, 1000, false);

},

methods:{

getsliders(){

return getsliders().then(data=>{

//console.log(data);

this.sliders=data;

});

}

}

}

.swiper-container{

width:100%;

height:180px;

}

.swiper-slide a{

display:block;

width:100%;

height:100%;

& img{

width:100%;

height:100%;

}

}

效果图

希望与广大网友互动？？

点此进行留言吧！