乐趣区

关于swiper.js:swiper实现异形滚动

jiezi

根本信息

官网介绍

Swiper is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

文档

  • 引入: https://swiperjs.com/get-star…
  • API: https://swiperjs.com/api/
  • Demo: https://swiperjs.com/demos/
  • Git: https://github.com/nolimits4w…

应用场景 - 过渡成果

  • 轮播图

实际

指标

实现一个异形轮播图。反对手势左右滑动切换核心图。

实现异形滚动的原理

核心页（class: swiper-slide-active）scale:1, 其余页 (class: swiper-slide) scale(0<x<1) 来实现核心页在用户视觉核心的成果。scale留白区域通过 swiper 的配置项（调整每个 swiper）+ css 款式（整体元素微调）来打消。

代码参考（局部）

index.vue：

    <div class="gallery-wrapper">
      <!-- Slider main container -->
      <div class="swiper-container">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
              <!-- Slides -->
              <div 
                class="swiper-slide" 
                v-for="(item,index) in images"
                :key="`${item.src}-index`"
              > 
                <img 
                  v-lazy="item.src" 
                  :key="item.src"
                  class="image-content"

                <v-touch 
                  tag="div"
                  @tap="onTap(index)"
                >
                <img 
                  src="./../../../assets/art-picture/scale-icon.png"
                  alt="放大"
                  class="scale-icon"
                />
                </v-touch>

                <!-- <div class="swiper-lazy-preloader">loading...</div> -->
            </div>
          </div>
      </div>
    </div>

style.less:

.swiper-container {
      width: 100%;
      height:100%;
    }
      
    .swiper-container > .swiper-wrapper{
      /** active 图片有暗影超出 */
      overflow-y:visible;
      /**
      * 针对 swiper 调整 offset
      * pre/next 容器边框漏出：20
      * 设计稿边距：17.5
      * 17.5 + 20 = 37.5px
      */
      // margin-left:-0.375rem;
    }
  
    .swiper-slide {
      position:relative;
      box-sizing: border-box;
      padding:0.3rem 0.3rem 0.9rem 0.3rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 300ms;
      width:3rem;
      height:4.25rem;
      transform: scale(0.74);
      background-image:url('../../../assets/art-picture/pic-border.png');
      background-repeat:  no-repeat;
      background-position:center ;
      background-size:100% 100%;
      img[lazy="loading"] {
        width: 0.3rem;
        height:0.3rem;
      }
    }
    .swiper-slide:not(.swiper-slide-active){
      /**
       * 计算 scale 造成的边距误差 
       * 设计稿缩放：0.74 设计稿以后播放的容器宽度 / 屏幕宽度：300/375
       * scale 产生的误差：300*(1-0.74)=78px
       * 标准值 17.5
       * 打消误差：78/2- 17.5/2  = 30.25px;
       */
      // margin-left:-0.3025rem; 
      // margin-right:-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{transform: scale(1);
      width: 3rem !important;
      height:4.25rem !important;
      /**
      * 打消边距计算对以后播放容器的误差
      * 边距影响：78/2 - 30.25
      * 打消误差：17.5 - (78/2 - 30.25) = 8.75px
      */
      // margin-left:0.0875rem !important;
      // margin-right:0.0875rem !important;
    }

js:

  ...

  // 须要变动的局部配置
  get parameters() {
    const parameters = {
      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 // handle async
    };
    if (this.images.length === 1) {parameters.spaceBetween = 0;}
    return parameters;
  }

  public mounted() {this.initRootFontSize();
    this.initSwiper({initialSlide: this.index});
  }

  // get rem(root font-size)
  public initRootFontSize() {const html = document.getElementsByTagName('html')[0];
    const rootFontSizeStr = html.style.fontSize;
    this.rootFontSize = parseFloat(rootFontSizeStr);
  }

  public initSwiper(params= {}) {
    const mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      loop: false,
      preloadImages: false, // preload images:false
      lazy: false, // lazy load images
      on: {
        slideChange: this.onSlideChange,
        sliderMove: () => {if (this.slideStatus !== 'fadeInOut') {this.slideStatus = 'fadeInOut';}
        },
        touchEnd: () => {this.slideStatus = 'fadeOut';},
      },
      ...this.parameters,
      ...params
    });
    this.mySwiper = mySwiper;
  }

  ...

踩过的坑

scale 存在的问题：

  • scale 尽管会放大元素尺寸，然而原来的尺寸空间并不会开释。能够参考 zoom vs transform:scale，这样就会在元素之间产生缩放间距
  • slidesPerView: Number 配置属性设置为数值，很可能会存在核心页始终无奈很好呈现在核心
  • loop:true 的时候，会复制三分节点。也就是说列表有 10 项，会有 3 *10=30 个节点，多的时候会对性能产生影响
  • loop:true 最开始和最开端切换，点击 swiper 不会触发 click 事件。在 swiper-slide 上也不会触发 click
  • on:tap(swiper,event) 这个在任何一页点击都会触发。然而：在 PC 上 event 测试优良(蕴含 path 属性)，到真机上就只有 isThrud 的了。你就没法晓得用户具体点了哪个元素

解决方案一

  • 应用margin-left: x<0;margin-right<0 来打消缩放间距【横竖屏幕切换会存在问题】
  • slidesPerView:'auto' 更好用
  • 禁止loop:true
  • 应用 on:tap 需谨慎，真机测试不可少

完满实现异形（反对横竖屏切换）

尽管通过下面 margin 设置负边距，在视觉上实现了异形的成果，然而在横竖屏切换的时候发现了款式被扭转的问题。

起因：本人应用 CSS 款式的形式批改 swiper wrapper 和 slider 的形式不会被 swiperJS 计算在内，导致了 translate 在计算上呈现了问题。

解决 1: 本人实现流动卡片居中

{
  slidesPerView: 1,
  loop: false,
  preloadImages: false, // preload images:false
  lazy: false, // lazy load images
}

解决 2: 不应用 CSS 款式，怎么实现去除 sclae 边距问题

通过应用发现，这个会给 slider 设置：spaceBetween。能够应用这个代替之前 CSS margin 的设置，这个间隔会被 swiepr 计算。

centeredSlides 默认为 left, 如何解决首张卡片居中成果？

所以计算好数值就能够设置了：

{
  spaceBetween: -0.3025 * this.rootFontSize,
  slidesOffsetBefore: 0.375 * this.rootFontSize,
  slidesOffsetAfter: -0.375 * this.rootFontSize,
}

为什么要设置 slidesOffsetAfter？
不设置的话在左右拖拽的时候会呈现贴边的 BUG。

解决 3: 屏幕大小适配（不同机型屏幕 | 横竖屏切换）

  • 在解决 2 外面设置的数值 swiper 只反对 px, 所以设置的必须是 rem → px
  • 须要在横竖屏切换的时候再获取最新的 rem, 更新 swiper
  public mounted() {this.initRootFontSize();
    this.initSwiper();
    window.addEventListener('resize', this.resizeHandler, false);
  }


  public initRootFontSize() {const html = document.getElementsByTagName('html')[0];
    const rootFontSizeStr = html.style.fontSize;
    this.rootFontSize = parseFloat(rootFontSizeStr);
  }  

  public resizeHandler() {this.initRootFontSize();
    /** update swiper params */
    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();// 要害 API}

这样下来，布局展现是没有问题了，然而对于异形，可能会呈现非流动卡片的宽高产生了变动。如果你对 slider 的宽高有严格的要求，就须要在配置里指定宽高：


{
  height:4.25 * 
this.rootFontSize,
  width:3 * this.rootFontSize,
}

能够抽取变动配置的函数：

  // 须要变动的局部配置
  get parameters() {
    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 // handle async
    };
  }

  public initSwiper(params= {}) {
    const mySwiper = new Swiper('.swiper-container', {
      slidesPerView: 1,
      loop: false,
      preloadImages: false, // preload images:false
      lazy: false, // lazy load images
      on: {slideChange: this.onSlideChange},
      ...this.parameters,
      ...params
    });
    this.mySwiper = mySwiper;
  }

  public resizeHandler() {this.initRootFontSize();
    /** update swiper params */
    Object.keys(this.parameters).forEach(key => {const value = this.parameters[key];
      this.mySwiper.params[key] = value;
    });
    this.mySwiper.update();}

解决 4: 异步加载数据，卡片布局问题

通常 list 是从接口获取到而后设置的，可能会遇到卡片布局显示异样的问题。这时候能够尝试下在配置里：

{observer:true}

这样就会更新元素布局了。

解决 5: 上述 4 步做完，单张展现下向左贴靠的问题

    // 解决只有一张图片的时候贴左的款式问题
    if (images.length === 1) {
      this.mySwiper.params.spaceBetween = 0;
      this.mySwiper.update();}

总结

实现完满同性的计划：

  • spaceBetween/slidesOffsetBefore/slidesOffsetAfter
  • observer: true

优化

  • v-lazy
  • v-touch
退出移动版