Swiper实现异形滚动

时间：2023-04-05 22:40:49 HTML5

基本信息官方介绍Swiper是免费且最现代的移动触摸滑块，具有硬件加速转换和惊人的原生行为。它旨在用于移动网站、移动网络应用程序和移动原生/混合应用程序。文档介绍：https://swiperjs.com/get-star...API：https://swiperjs.com/api/演示：https://swiperjs.com/demos/Git：https://github。com/nolimits4w...利用场景转场效果轮播练习目标实现异形轮播。支持手势左右滑动切换居中图片。实现异形滚动的原理实现异形效果centerpage(class:swiper-slide-active)scale:1otherpages(class:swiper-slide)scale(0

style.less:.swiper-container{宽度：100%；高度：100%；}.swiper-container>.swiper-wrapper{/**activeimagehasshadowbeyond*/overflow-y:visible;/***调整swiper偏移量*pre/nextcontainerborderleakage:20*designdraftmargin:17.5*17.5+20=37.5px*///margin-left:-0.375rem;}.swiper-slide{位置：相对；框大小：边框框；填充：0.3rem0.3rem0.9rem0.3rem；显示：弹性；对齐项目：居中；证明内容：居中；过渡：300ms；宽度：3rem；高度：4.25rem；变换：比例（0.74）；背景图像：url（'../../../assets/art-picture/pic-border.png'）;背景重复：没有-重复;背景位置：中心；背景大小：100%100%；img[lazy="loading"]{宽度：0.3rem；高度：0.3rem；}}.swiper-slide:not(.swiper-slide-active){/***计算scale引起的margin误差*设计稿zoom:0.74设计稿当前播放容器宽度/屏幕宽度:300/375*由scale引起的误差scale:300*(1-0.74)=78px*标准值17.5*剔除误差：78/2-17.5/2=30.25px；*///左边距：-0.3025rem；//右边距:-0.3025rem;/***垂直居中计算背景图像阴影造成的误差*实际位置：365*0.74/2=135.5*当前位置：425*0.74/2=157.25*误差：(157.25-135.5)/2=11.1px*/margin-top:-0.111rem;}.swiper-slide-active{变换：缩放（1）；宽度：3rem！重要；高度：4.25rem！重要；/***消除当前播放容器上margin计算的误差*Margin影响：78/2-30.25*消除误差：17.5-(78/2-30.25)=8.75px*///margin-left:0.0875rem！重要的;//margin-right:0.0875rem!important;}js:...//一些需要更改的配置tparameters(){constparameters={spaceBetween:-0.225*this.rootFontSize,slidesOffsetBefore:0.375*this.rootFontSize,slidesOffsetAfter:-0.375*this.rootFontSize,宽度:3*this.rootFontSize,高度:4.25*this.rootFontSize,observer:true//处理异步};如果(this.images.length===1){parameters.spaceBetween=0;}返回参数；}publicmounted(){this.initRootFontSize();this.initSwiper({initialSlide:this.index});}//getrem(rootfont-size)publicinitRootFontSize(){consthtml=document.getElementsByTagName('html')[0];constrootFontSizeStr=html.style.fontSize;this.rootFontSize=parseFloat(rootFontSizeStr);}publicinitSwiper(params={}){constmySwiper=newSwiper('.swiper-container',{slidesPerView:1,loop:false,preloadImages:false,//预加载图片:falselazy:false,//延迟加载图像：{slideChange:this.onSlideChange,sliderMove:()=>{if(this.slideStatus!=='fadeInOut'){this.slideStatus='fadeInOut';}},touchEnd:()=>{this.slideStatus='fadeOut';},},...this.parameters,...params});this.mySwiper=mySwiper;}...scale的问题：虽然scale会缩小元素的尺寸，但是原来的size空间并不会被释放。可以参考zoomvstransform:scale，它会在元素之间产生缩放间隙。slidesPerView:Number配置属性设置为一个值。很可能中心页面在中心循环中不会一直很好的出现：true这时候，三点节点会被复制。也就是说，列表中有10个item，就会有3*10=30个节点。如果节点太多，会影响性能。clickon:tap(swiper,event)不会在swiper-slide上触发，它会在任何页面点击时触发。但是：事件测试在PC上非常好（包括path属性），但是在真机上只有isThrud可用。您无法知道用户点击了哪个元素。解决方法：使用margin-left:x<0;margin-right<0来消除缩放间隙【横竖屏切换会有问题】slidesPerView:'auto'最好禁止loop:true使用on:tap时，你需要谨慎。必须真机测试才能完美实现异形（支持横竖屏切换）。虽然在margin之上设置了负margin，视觉上实现了异常效果，但是在横竖屏切换的时候才发现。样式被更改的问题。原因：使用CSS样式修改swiperwrapper和slider的方式不会被swiperJS统计，导致translate的计算出现问题。解决方案一：自行居中活动卡片{slidesPerView:1,loop:false,preloadImages:false,//preloadimages:falselazy:false,//lazyloadimages}解决方案二：如何在不使用CSS的情况下去除sclae边缘styles使用后发现问题，发现这个会设置slider:spaceBetween。您可以使用这个代替之前的CSS边距设置，这个距离将由swiepr计算。centeredSlides默认是left，如何解决第一张卡片的居中效果？所以计算完值后，可以设置：{spaceBetween:-0.3025*this.rootFontSize,slidesOffsetBefore:0.375*this.rootFontSize,slidesOffsetAfter:-0.375*this.rootFontSize,}为什么要设置slidesOffsetAfter？如果不设置，左右拖动时边框会出现BUG。方案三：屏幕尺寸适配（不同机型的屏幕|横竖屏切换）方案二设置的值只支持px，所以设置必须是rem→px。横竖屏切换时需要获取最新的rem。更新swiperpublicmounted(){this.initRootFontSize();这个.initSwiper();window.addEventListener('resize',this.resizeHandler,false);}publicinitRootFontSize(){consthtml=document.getElementsByTagName('html')[0];constrootFontSizeStr=html.style.fontSize;this.rootFontSize=parseFloat(rootFontSizeStr);}publicresizeHandler(){this.initRootFontSize();/**更新滑动参数*/this.mySwiper.params.spaceBetween=-0.3025*this.rootFontSize;this.mySwiper.params.slidesOffsetBefore=0.375*this.rootFontSize;this.mySwiper.params.slidesOffsetAfter=-0.375*this.rootFontSize;this.mySwiper.update();//KeyAPI}这样布局显示没有问题，但是对于特殊形状，非活动卡片的宽高可能会发生变化。如果对滑块的宽高要求比较严格，需要在配置中指定宽高：{height:4.25*this.rootFontSize,width:3*this.rootFontSize,}可以提取函数更改配置：//需要更改部分配置getparameters(){return{spaceBetween:-0.225*this.rootFontSize,slidesOffsetBefore:0.375*this.rootFontSize,slidesOffsetAfter:-0.375*this.rootFontSize,width:3*this.rootFontSize,height:4.25*this.rootFontSize,observer:true//异步处理};}publicinitSwiper(params={}){constmySwiper=newSwiper('.swiper-container',{slidesPerView:1,loop:false,preloadImages:false,//预加载图片:falselazy:false,//延迟加载图片位于：{slideChange:this.onSlideChange},...this.parameters,...params});this.mySwiper=mySwiper;}publicresizeHandler(){这个。initRootFontSize();/**更新滑动器参数*/Object.keys(this.parameters).forEach(key=>{constvalue=this.parameters[key];this.mySwiper.params[键]=值；});this.mySwiper.update();}解决方案四：异步加载数据，卡片布局问题通常是从接口获取列表然后设置，可能会遇到卡片布局这时候可以尝试在配置中显示异常问题：{observer:true}这将更新元素布局。解决方案5：完成以上4步后，单张显示下粘左的问题//处理只有一张图片时粘左的样式问题if(images.length===1){这个.mySwiper.params。空间之间=0；this.mySwiper.update();}总结实现完美异性的解决方案：spaceBetween/slidesOffsetBefore/slidesOffsetAfterobserver:trueoptimizev-lazyv-touch

上一篇：Canvas离屏技术与放大镜实现

下一篇：我从fabric.js学到了什么

Swiper实现异形滚动相关文章