查看: 2427|回复: 2
打印 上一主题 下一主题

在vue引入swiper

[复制链接]

该用户从未签到

1

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
跳转到指定楼层
楼主
发表于 2018-1-18 12:26:42 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式
如何在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


希望能得到解决
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

1

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
沙发
 楼主| 发表于 2018-1-18 12:39:54 | 显示全部楼层
methods: 里边的 unbo 拼写错误 改成 lunbo
还是报错哦
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-5-19 21:37 , Processed in 0.067272 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表