1. 首先安装 npm install vue-awesome-swiper --save 若是提示网络错误可能被和谐了,可以使用npm镜像。若已经是可以省略第2步
2. 设置为国内镜像 npm configset registry https://registry.npm.taobao.org --global
3. 在main.js中引入
import
Vue from
'vue'
import
VueAwesomeSwiper from
'vue-awesome-swiper'
全局注册
Vue.use(VueAwesomeSwiper)
4. 在vue页面中使用
<template>
<div class="swiper-container swiper-container-horizontal">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="v in this.banner"><router-link to="v.bm_href"><img :src="v.bm_img" alt=""></router-link></swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="v in this.banner"><router-link to="v.bm_href"><img :src="v.bm_img" alt=""></router-link></swiper-slide>
</swiper>
<div class="swiper-pagination"></div>
</div>
</template>
<script type="text/ecmascript-6">
import { getAdvertisementList } from '../assets/js/api' //引入接口文件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data() {
return {
banner:[], //用来存放从接口获取的banner数据
swiperOption: {
autoplay: 3000, //开启自动播放
pagination: '.swiper-pagination', //开启圆点分页
paginationClickable: true,
}
}
},
components: {
swiper,
swiperSlide
},
created() {
//获取banner
getAdvertisementList(data).then((res) => {
if (res.code == 0) {
for(let i in res.data){
this.banner.push(res.data[i]);
}
}
}).catch((err) => {
console.log(err)
})
}
</script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
data() {
return {
banner:[], //用来存放从接口获取的banner数据
swiperOption: {
autoplay: 3000, //开启自动播放
pagination: '.swiper-pagination', //开启圆点分页
paginationClickable: true,
}
}
},
components: {
swiper,
swiperSlide
},
created() {
//获取banner
getAdvertisementList(data).then((res) => {
if (res.code == 0) {
for(let i in res.data){
this.banner.push(res.data[i]);
}
}
}).catch((err) => {
console.log(err)
})
}
</script>