swiper vue 上一页_swiper在vue中的用法

首先通过npm i vue-awesome-swiper --save 来在vue中下载插件

然后再main.js中引入

require('swiper/dist/css/swiper.css')

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

接着在需要用到的组件里结构中插入代码

然后在data中定义轮播图

swiperOption: {

pagination: '.swiper-pagination',

paginationClickable: true,

autoplay: 2500,

autoplayDisableOnInteraction: false,

loop: false,

coverflow: {

rotate: 30,

stretch: 10,

depth: 60,

modifier: 2,

slideShadows : true

}

},

此时的coverflow是轮播图切换的方式 更改属性可切换轮播模式

详情请参考http://3.swiper.com.cn/api/Effects/2015/0308/193.html

好了，现在你可以去发请求取数据得到你想要的效果啦