vue2.0使用swiper

源自：http://blog.csdn.net/susuzhe123/article/details/69525609

步骤一：安装vue，  

           $ npm install vue  

步骤二：创建vue项目  

          # 全局安装 vue-cli  

          $ npm install -g vue-cli  

          $ cd my-project  

          $ npm install  

          $ npm run dev  

上面这些就是安装好vue项目，最主要的就是下面的步骤

[html] view plain copy

步骤三：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。  

[html] view plain copy

步骤四：  

安装runtime：  

终端命令：npm install babel-runtime  

[html] view plain copy

步骤五：  

修改.eslintrc.js文件如下：  

// http://eslint.org/docs/user-guide/configuring  

module.exports = {  

  root: true,  

  parser: 'babel-eslint',  

  parserOptions: {  

    sourceType: 'module'  

  },  

  env: {  

    browser: true,  

  },  

  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style  

  extends: 'standard',  

  // required to lint *.vue files  

  plugins: [  

    'html'  

  ],  

  // add your custom rules here  

  'rules': {  

    // allow paren-less arrow functions  

    'arrow-parens': 0,  

    // allow async-await  

    'generator-star-spacing': 0,  

    // allow debugger during development  

'no-debugger':process.env.NODE_ENV === 'production' ? 2 : 0  

  },  

  'globals': {  

    "Swiper": true  

  }   //这个地方是新加入的   全局注入  

}  

[html] view plain copy

步骤六：在自己的vue文件中添加轮播图代码  

[html] view plain copy

[javascript] view plain copy

import Swiper from '../../static/swiper-3.4.2.min.js'  

let galleryTop  

let galleryThumbs  

export default {  

name:'main',  

  data () {  

return {  

      lbt: [  

        {  

'imgs': '../static/product/lbt1.jpg'  

        }, {  

'imgs': '../static/product/lbt2.jpg'  

        }, {  

'imgs': '../static/product/lbt3.jpg'  

        }  

      ]  

    }  

  },  

  mounted () {  

this.lunbo()  

  },  

  methods: {  

    lunbo () {  

galleryTop =new Swiper('.gallery-top', {  

nextButton:'.swiper-button-next',  

prevButton:'.swiper-button-prev',  

        spaceBetween: 10,  

grabCursor:true,  

        initialSlide: 1,  

autoplayDisableOnInteraction:false  

      })  

galleryThumbs =new Swiper('.gallery-thumbs', {  

        spaceBetween: 10,  

        autoplay: 4000,  

        initialSlide: 1,  

centeredSlides:true,  

slidesPerView:'auto',  

        touchRatio: 0.2,  

slideToClickedSlide:true,  

autoplayDisableOnInteraction:false,  

grabCursor:true  

      })  

      galleryTop.params.control = galleryThumbs  

      galleryThumbs.params.control = galleryTop  

    },  

    stopPlay () {  

      galleryTop.stopAutoplay()  

      galleryThumbs.stopAutoplay()  

    },  

    play () {  

      galleryTop.startAutoplay()  

      galleryThumbs.startAutoplay()  

    }  

  }  

}  

[css] view plain copy

@import url("../assets/swiper-3.4.2.min.css");  

.gallery-top{    

height:32rem;    

width:100%;  

}    

.gallery-thumbs{    

height:20%;    

    box-sizing:border-box;    

padding:10px 0;    

background: rgba(0, 0, 0, 0.4);  

cursor: pointer;  

}    

.gallery-thumbs .swiper-slide{    

width:30%;    

height:6rem;    

opacity:0.3;    

}    

.gallery-thumbs .swiper-slide-active{    

opacity:1;   

}   

.swiper-slide{  

background-size: 100% 160%;  

-webkit-background-size: 100% 160%;  

}  

这里还有一个很重要的问题，在模板里面设置背景图，写法应该是

[html] view plain copy

v-bind:style="{backgroundImage: 'url(' + value.imgs + ')'}"