vue项目之H5 app页面通过swiper实现中间变大，两边缩小的滑动轮播功能

一、需求

微信H5，小程序，APP三端：手动滑动实现中间放大，两边图片缩小的效果。
可视区可看到三张图，其中左右两边的仅出现一小部分。如图

二、实现

按照依赖包

	npm install vue-awesome-swiper --save

HTML:

	<swiper :options="swiperOption" ref="mySwiper" class="swiper">
      <swiper-slide v-for="(item, index) in pictures" :key="index" class="swiper_item">
        <div class="img" :style="{background: item.advertiseImages, 'background-size': '100%'}"></div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>      
    </swiper>

JS:

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

data() {
    return {
      swiperOption: {
        effect: 'coverflow',
        centeredSlides: true,
        spaceBetween: '16%',
        slidesPerView: 'auto',
        loop: true,
        autoplay: false, // 是否自动播放
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: false,
        },
        pagination: { // 分页器
          el: '.swiper-pagination',
          type: 'fraction',
        },
      },
      pictures: [
		  {
		    advertiseImages: `url(${require('../../assets/imgs/loveHome/card01.png')}) no-repeat top`,
		    poster: require('@/assets/imgs/loveHome/poster01.png')
		  },
		  {
		    advertiseImages: `url(${require('../../assets/imgs/loveHome/card02.png')}) no-repeat top`,
		    poster: require('@/assets/imgs/loveHome/poster02.png')
		  }
	  ],


...code...

components: {
  swiper: Swiper,
  swiperSlide: SwiperSlide,
},
computed: {
  swiper() {
    return this.$refs.mySwiper.swiper
  }
},

css–stylus：

.swiper-container
    margin-top 110px
    width 750px
    height 793px
    margin-bottom 80px
    overflow visible!important
    .swiper-wrapper .swiper-slide
      width 540px
      border-radius 20px
      box-shadow 0px 20px 10px 0px #E5EDF8
    .swiper-wrapper .swiper-slide .img
      width 100%
      height 100%
      background-size 100%
      border-radius 20px
    .swiper-wrapper .swiper-slide img
      width 100%
      height 100%
      border-radius 20px
      
    .swiper-pagination
      font-size 28px
      font-family PingFangSC-Regular,PingFang SC
      color #8A91A4
      bottom -80px!important
      touch-select()

提测后问题

1、（交互：） IOS 滑动不好使
解决：swiperOption配置里面增加touchRatio

	swiperOption: {
        effect: 'coverflow',
        centeredSlides: true,
        spaceBetween: '16%',
        slidesPerView: 'auto',
        loop: true,
        autoplay: false, // 是否自动播放
        touchRatio: 2,

2、（交互：）IOS 机型仔细看都带点儿旋转效果，安卓没有
无解，除非不用coverflow这种方式。。

3、（交互：）IOS 手机按着图片有选中效果，安卓没有
css里面写一个函数，哪个图片不需要选中，调用即可

touch-select() {
  -webkit-touch-callout none
  -webkit-user-select:none; /*webkit浏览器*/
  -khtml-user-select:none; /*早期浏览器*/
  -moz-user-select:none;/*火狐*/
  -ms-user-select:none; /*IE10*/
  user-select:none;
}