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-containermargin-top 110pxwidth 750pxheight 793pxmargin-bottom 80pxoverflow visible!important.swiper-wrapper .swiper-slidewidth 540pxborder-radius 20pxbox-shadow 0px 20px 10px 0px #E5EDF8.swiper-wrapper .swiper-slide .imgwidth 100%height 100%background-size 100%border-radius 20px.swiper-wrapper .swiper-slide imgwidth 100%height 100%border-radius 20px.swiper-paginationfont-size 28pxfont-family PingFangSC-Regular,PingFang SCcolor #8A91A4bottom -80px!importanttouch-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;
}

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

vue项目移动H5的页面调试
移动H5的页面调试 1.eruda 直接在html中外链引入初始化;然后重新运行项目即可看到 <script src="//cdn.bootcdn.net/ajax/libs/erud ...
vue项目之H5 app 生成海报功能
一.需求本次[世纪盛典]活动,分为三期,每期都有海报相关的工作内容. 海报带有动态的个人信息.头像.证书编号及二维码等. 本次活动需要在微信h5.小程序.app里面正常启动. 二.经过网上查找使用 ...
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) 目录 Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) ...
vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
Vue项目保存代码之后页面自动更新
Vue项目保存代码之后页面自动更新想要在代码中保存之后,页面自动刷新. 命令行敲如下代码 npm install webpack-dev-server 下载了这个东西就不用每次都手动刷新了,我也不知 ...
【vue】 vue项目开发卡片展示页面----菜品管理
vue项目开发卡片展示页面----菜品管理对话框表单获取父组件数据子组件dishform 对话框表单样式 methods 中的dataInit方法获取父组件传来的数据 <script> ...
Hbuilder将vue项目打包为app（具体步骤和注意点）
Hbuilder将vue项目打包为app(具体步骤和注意点) 打包配置进行打包注意事项打包配置 1.打开Hbuider,点击左上角文件,点击新建,然后点击项目.项目类型要选择5+App,项目名称 ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
VUE项目--卖座app
一.由于做移动端,所以先根据设计稿设置好设置rem 二.做轮播图 2.使用swiper引入轮播图 1)现在flims文件下自定义film-swiper组件,来显示大轮播,注意加上key值,不然会加载过 ...

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

一、需求

二、实现

提测后问题

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

最新文章

热门文章