3-vuejs2.0实战：仿豆瓣app项目，创建Swipe图片轮播组件

swipe图片轮播不管是在pc端，还是移动端都是常见的效果，在这一章将用开源插件swiper完成一个比较简单的swipe循环轮播组件.最近公司太忙，更新慢，请见谅~~

官网介绍：

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

swiper中文文档：http://www.swiper.com.cn

我们在components文件夹里创建一个swipe组件，将需要用到的js以及css文件复制到assets/lib文件夹下，如图：

Paste_Image.png

然后根据swiper的使用方法：http://www.swiper.com.cn/usage/index.html

将html结构复制到swipe组件里，引入css文件，以及js

保存预览会报错，我们将swiper.js尾部需要修改一下

将AMD模式删掉，改成

export default window.Swiper;

我们可能在一个页面引用多个swipe组件，就会发生命名冲突，所以我们在实例化swiper的时候，类名需要变化一下，例如：

    

      
Slide 1
        
Slide 2
        
Slide 3
    
    
    

  
 export default {
    props: {
      swipeid: {
        type: String,
        default: 'swipe01'
      }
    },
    mounted() {
      var That = this;
      new Swiper('.'+That.swipeid, {
          loop: true,
          // 如果需要分页器
          pagination: '.swiper-pagination',
      })
    }

简单的swipe组件就完成了，我们再来丰富他的配置参数，改成可传递参数的组件。具体参数参考中文api文档：http://www.swiper.com.cn/api/index.html

swipe.vue

index.vue

录像1_转.gif

git地址：
https://github.com/MrMoveon/doubanApp

vue专题目录：
1-vuejs2.0实战：仿豆瓣app项目，创建自定义组件tabbar

2-vuejs2.0实战：仿豆瓣app项目，创建组件header,tabbar路由跳转