Swiper中文论坛

标题: 在vue引入swiper [打印本页]

作者: meixing 时间: 2018-1-18 12:26
标题: 在vue引入swiper
如何在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

希望能得到解决

作者: meixing 时间: 2018-1-18 12:39
methods: 里边的 unbo 拼写错误改成 lunbo 后
还是报错哦

作者: 紫气东来3 时间: 2018-1-23 11:48
可以参考一下这里 https://segmentfault.com/q/1010000012895675
这里

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)