vue.js中使用swiper的方法:首先下载【swiper.js】;然后在【main.js】中全局引入【swiper.js】;最后在模板中配置相关内容即可。
【相关文章推荐:vue.js】
vue.js中使用swiper的方法:
1、下载swiper.jsnpm install vue-awesome-swiper --save
2、在main.js中全局引入swiper.jsimport VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
3、在模板中配置相关内容
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
})
}
}
相关免费学习推荐:JavaScript(视频)