|
如何在vue项目里使用swiper4?
在app.vue
import Swiper from'../static/js/swiper-4.1.0.min.js'
let swiperMain
let Swiper1
let Swiper2
export default {
name: 'App',
data(){
return{
mainSwiper:[
{imgURL:'static/images/ad_1.png'},
{imgURL:'static/images/ad_1.png'},
{imgURL:'static/images/ad_1.png'},
{imgURL:'static/images/ad_1.png'},
{imgURL:'static/images/ad_1.png'},
{imgURL:'static/images/ad_1.png'},
]
}
},
mounted () {
this.$nextTick(function () {
this.lunbo();
})
},
methods: {
unbo: function() {
swiperMain = new Swiper('.swiper_main', {
pagination: {
el: '.swiper-pagination',
},
loop:true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
speed:200,
})
Swiper1 = new Swiper('#brand_swiper_1',{
loop:true,
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
speed:400,
effect : 'fade',
})
Swiper2 = new Swiper('#brand_swiper_2',{
pagination: {
el: '.swiper-pagination',
},
loop:true,
speed:400,
controller: {
control: Swiper1,
},
})
Swiper1.controller.control = Swiper2
Swiper2.controller.control = Swiper1
}
}
}
这样写的
<style>
@import '../static/css/swiper-4.1.0.min.css'
</style>
这么写的,但是报错
vue.esm.js?efeb:578 [Vue warn]: Error in nextTick: "TypeError: this.lunbo is not a function"
TypeError: this.lunbo is not a function
希望能得到解决
|
|