阅读 630

Vue组件之路 - 万能的轮播图

Vue组件之路-轮播图组件

众所周知,轮播图最为我大前端最最常见的组件之一,应该说每个前端工程师都要会写一遍吧。正好这两天在家休息,便在家写了这个组件。废话少说,本人的轮播图特点如下:

  1. 常规左右滑动切换下一张或者上一张轮播图和指示器切换
  2. 可以获得在PC浏览器上获得和手机上一样滑动体验
  3. 手机横屏及时响应,不至于显示上出现问题

先把gitHub的仓库地址放在前面😁:github.com/Mryuelaiyue… 里面swipe的组件就是了,实际效果图如下

1.gif figure 1.正常滑动

2.gif figure 2.横屏效果

3.gif figure 3.PC端滑动

1. 数据处理

和许多人采用的一样,我的轮播图数据格式选择了首位各追加了一个,如: [0, 1, 2, 3] => [3, 0, 1, 2, 3, 0] ,这样做的好处就是默认展示第一张或者最后一张轮播图时候,滑动会更流畅

2. 样式设置

样式设置的思路如下:轮播图结构分为两个:轮播区域+指示器区,其中,轮播图区域的大小也就是整个轮播图的大小了,轮播图区域的样式如下,整体我是用scss写的(较简洁),其中ios-fix用来修复iOS设备滑动时候出现闪动问题的,原因是:transform 属性造成的3d转换时候造成的,轮播区域需要设置white-space为nowrap,这样就能让子swipe排在一列而不至于掉下去,最后我给每个siwpe项添加了包裹容器,目的有两个:一是方便控制相邻swipe项的间距,最重要的是:使用该组件不需要给组件传入整个滑动结构了,只需要传入单个swipe项目的结构样式就行了。

@mixin ios-fix {
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}
#swipe {
  position: relative;
  width: 100%;
  font-size: 0;
  overflow: hidden;
  @include ios-fix;
  .swipe {
    white-space: nowrap;
    @include ios-fix;
    .swipe-item-wrapper {
      width: 100%;
      display: inline-block;
      box-sizing: border-box;
      @include ios-fix;
    }
  }
  .indicator {
    position: absolute;
    display: flex;
  }
复制代码

3. 说明

activeIndex变量表示当前轮播图的索引值,这个变量非常重要,因为我用它来计算上一张或者下一张轮播图X轴移动位置,也用它推导表示指示器索引值。

4. 滑动开始

当前鼠标或手指触碰到屏幕时候,得立刻获取鼠标或者手指位置,这里我定义了一个startX变量,用来保存每次鼠标或手指触碰到屏幕时候的X轴位置。

5. 滑动

做时时滑动,其实很简单,我们只需要时事动态的改变滑动位置就行了,计算好鼠标或手指划过的距离,然后改变轮播图的X轴的位移,不过要注意的是,需要对两边的临界值做好处理,总不能滑倒第一张了,你还能往下滑吧,代码如下

// 临界值处理 - 滑动上/下一张
if (this.transX >= 0) {
  this.isCritical = true;
  this.activeIndex = 0;
} else if (this.transX <= this.minTransX) {
  this.isCritical = true;
  this.activeIndex = this.swipeItemCount - 1;
} else {
  // 时时滑动
  this.isCritical = false;
  this.diffX = this.calcX(e, Swipe.MouseMove) - this.startX;
  this.transX = this.diffX + this.preX;
}
复制代码

6. 滑动结束

当你鼠标或手指离开之,也就意味着滑动结束了。这是比较麻烦的一件事,是留在当前这张轮播图上还是滑倒上或下一张去,这里我使用一个criticalVal变量,用鼠标或手指滑动距离/轮播图的宽度,如果大于等于这个临界变量,便滑动到下一张去,如果小于则停留在当前轮播图上,在滑动到下、上一张亦或者留在当前这一张轮播图的时候,得给它加上个动画效果,动画效果我定义了一个animateState变量,用来决定动画开启或者关闭

7. 动画结束监听事件

滑动动画结束后,我们需要立即关闭滚动动画,紧接着需要对临界值进行处理,如果滚动到第一张轮播图那就要瞬间拉到倒数第二张(实际位置),如果滚动到最后一张,那就要拉到第二张位置上去

8. 自动轮播图

自动轮播可以选的,组件提供了autoPlay和autoPlayTime两个属性,分别定义是否开启和自动轮播时间,对于自动轮播,让activeIndex每次➕1就行了,对于临界值,做一下处理便可以了

9. 屏幕大小响应

当屏幕大小发生变化(例如手机由竖屏变为横屏)时候,我们需要监听屏幕变化,初始化轮播图宽度,滑动临界值位置信息 window.addEventListener("resize", this.init); // 监听页面大小发生变化,重新初始化参数

总结

滑动轮播图并不复杂,但是想要优化好,需要有点耐心,有啥问题欢迎各位大佬批评指正,转载请说明出处,不胜感激😁!!!

文章分类
前端
文章标签