vue.js中使用swiper的方法：先下載【swiper.js】；然後在【main.js】中全域引入【swiper.js】；最後在範本中配置相關內容即可。
【相關文章推薦：vue.js】
vue.js中使用swiper的方法：
1、下載swiper.js
npm install vue-awesome-swiper --save
2、在main.js中全域引入swiper.js
import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper)
3、在範本中設定相關內容
<template>
<swiper :options="swiperOption">
<swiper-slide v-for="item in imglist">
<img :src="rootLink+ '/resources/img/' + item.imgPath"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
import axios from 'axios'
export default {
name: 'carrousel',
data() {
return {
rootLink: 'http://119.23.28.239:8080',
imglist:[],
swiperOption: {
autoplay: 3000, //l轮播间隔时间
loop: true, //是否自动轮播
pagination : '.swiper-pagination', //轮播图中下标点显示
paginationClickable :true //轮播图中下标点显示
}
}
},
mounted() {
var vm = this;
axios.get(vm.rootLink + '/train/homePage/banner?type=上面')
.then(function (data) {
vm.imglist = data.data.data
})
}
}
</script>相關免費學習推薦：JavaScript（影片）
以上是vue.js怎麼用swiper的詳細內容。更多資訊請關注PHP中文網其他相關文章！
