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

阳光穿透心脏的1/2处 2021-09-01 10:26 1731阅读 0赞

## 一、需求 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70_pic_center]

## 二、实现 ##

按照依赖包

npm install vue-awesome-swiper --save

HTML:

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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210804/c831328a0da34d54aeb6df7c7c374ff2.png