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

一、需求

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

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

文章图片

二、实现按照依赖包

npm install vue-awesome-swiper --save

HTML:

:options="swiperOption" ref="mySwiper" class="swiper"> v-for="(item, index) in pictures" :key="index" class="swiper_item">

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

【vue项目之H5 app页面通过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; }