Vue中使用swiper轮播图展示并可点击查看大图

2019独角兽企业重金招聘Python工程师标准>>>

最近一直使用vue开发，现需求是在首页展示轮播图，点击当前的轮播图可以展开相应的大图，大图要与点击的图片一致。

由于图片大小不一，在首页展示的图片定宽高，难免会出现图片拉抻或者显示不全，所以针对首页的轮播图使用背景图片进行设置，而点开的大图要求点击非图片区域才能关闭大图，所以大图需要使用img图片来进行设置；

由于图片的列表是后台，会出现三十张以上的图片的情况，为了性能问题，首次只加载三张，判断滑动防线，动态添加图片；

这里涉及到三个模块组件，引用轮播图的组件imageDemo.vue，轮播图组件tjImageViewer.vue，大图轮播图组件tjImageView.vue；目的是把轮播单独做成公共组件，需要的地方即可使用；

一下是对项目关键点的记录，方便以后swiper的开发使用；

1. 安装swiper，引用swiper
   npm install swiper --save
   package.json中dependencies中会出现swiper以及其版本号 "swiper": "^3.4.2"
   
   swiper使用的地方并不是全局，不需要像网上的介绍，全局设置他，这样反倒会拖累整个项目性能，我们就是哪里需要他，就在那个模块里面引用他；
   直接在需要的模块这样引用即可  import swiper from 'swiper'
   这里需要注意一点，这样处理之后我发现页面中swiper的样式没有加载进来，如果你也在项目中发现swiper的样式并没有加载进来，可以去官网单独下载一个swiper-3.4.2.min.css，放到项目中，然后引用即可  import '@/assets/css/swiper-3.4.2.min.css'
    
2. imageDemo.vue引用轮播图组件
   注意：其中pictureList是轮播图片的数据，isShowImage来控制是否有点击查看大图的需要，只有这个字段为true时，点击小图才能查看大图，反之。。。。
    
3. tjImageViewer.vue
   这里轮播图的大小为了适应各种分辨率的手机，保证宽高比例不变，使用css中的vw作为单位；用起来还是挺好用的，但是对于华为手机的默认的低版本浏览器还是差轻人意，这里处理的办法就是对轮播图的外框做了一个min-height的设置；
   由于在首页轮播，由于图片大小不一，只能使用背景图片的方式，取中间的一块；

   注意：这里关于首先加载三张，然后左右滑动动态加载的做法：
   1.在组件渲染数据之前，对数据进行处理，也就是created中的方法，找出第一二张还有最后一张，如果第一次只显示一张图片的话，当滑动的过程中会出现空白的情况，所以第一次加载三张，滑动的时候去加载下一张的下一张就ok了；
   2.渲染图片的时候判断数据isLoadImage是否为true，如果为true则显示图片反之；
   3.至于Swiper中的用法，参考http://www.swiper.com.cn/api/即可；
   4.图片滑动的时候涉及到左滑右滑，这样就涉及到时加载哪张图片，具体看上面代码，自己在本子上划了一阵子感觉这么写是对的，当然 也没有测出bug啦；，比较恶心还是右滑动到最后一张，左滑动到第一张，汗！！！
   5.至于点开图片，进入到相应的大图，还是比较好处理的，swiper可以设置第一张图片的索引，即 initialSlide 属性；当触发swiper的onClick事件时候获取swiper.realIndex，然后传过去即可；
   6.这里还对大图的动态展示做了处理，也是需要默认展示三张，滑动动态添加，所以需要做一下计算，告诉大图，那三张是需要展示出来图片的；序号分别是 preIndex  initialIndex  afterIndex
   7.忽略标题那里的处理，有需求的话可以看一下
    

4. tjImageView.vue
    

   注意：处理过程差不多，也就那些，这里需要提到的是 大图展开的过程，使用了transition，为了展开时候有动画效果；具体百度吧；
   
   
   
   
   有问题，欢迎交流哈。。。。。
    

转载于:https://my.oschina.net/leonaLily/blog/1486916