Vue滑动翻页组件swiper的实现---第一版

深藏阁楼爱情的钟 2022-05-09 01:04 1226阅读 0赞

关于滑动翻页，有很多优秀的插件可以使用，但是多多少少都有点大，所以自己试着完成一个组件来实现。（以左右滑动翻页为例）

**1、主要思路**

最主要的就是对三个触摸事件的处理：touchstart、touchmove、touchend

在touchstart事件处理程序中记录一些初始值，比如原始坐标；在touchmove事件处理程序中计算实时滑动的距离，让元素随之一起偏移；在touchend事件处理程序中计算最终的滑动距离，大于阙值则滑动一整页，小于则回到起始位置。

**2、代码实现**

**页面结构**：具体的组件结构和数据传递就不展示了，只列出编译后的HTML结构如下：

![70][]

**基本样式**：inline-block用font-size: 0来隐藏间距

**初始设置**：记录页面宽度、.ths\_swiper-wrap元素的宽度、滚动的元素.swiper

mounted () {
        this.pageWidth = document.documentElement.clientWidth
        this.elementWidth = this.$refs.swiper.offsetWidth
        this.swiperEles = this.$refs.swiper.querySelectorAll('.swiper')
    },

**滚动元素**：这里需要专门记录的是，在.ths\_swiper-wrap元素上监听滑动事件，.ths\_swiper-wrap元素和.swiper元素滑动时都会触发。所以我一开始是使用.self修饰符，只监听.ths\_swiper-wrap元素的滚动，移动的也是.ths\_swiper-wrap元素。

但是这样做会有个问题，手指点在.swiper元素上时无法滑动，只有点在.swiper外 && .ths\_swiper-wrap内（.ths\_swiper-wrap的padding，或.swiper的margin）时才能滑动。所以，最终我选择不是滑动.ths\_swiper-wrap元素，而是滑动全部.swiper元素。

**事件处理**：

touchstart (e) {
      this.originalPos = e.touches[0].pageX
      this.originalLeft = Number(this.swiperEles[0].style.left.split('px')[0])
    },
    touchmove (e) {
      this.doSlide((e.touches[0].pageX - this.originalPos) / 2) // 除以2来控制滑动速度
    },
    touchend (e) {
      let moveDistance = e.changedTouches[0].pageX - this.originalPos // >0 右滑，<0 左滑
      let currentLeft = Number(this.swiperEles[0].style.left.split('px')[0])
      if ((Math.abs(moveDistance) > 100 && ((moveDistance > 0 && currentLeft < 0) || (moveDistance < 0 && Math.abs(currentLeft) < this.elementWidth - this.pageWidth)))) {
        // 滑动距离大于阙值100，且内容在边界内时，滑动一整页
        let distance = moveDistance > 0 ? this.pageWidth : -this.pageWidth
        this.doSlide(distance)
      } else {
        // 滑动回原处
        this.doSlide(0)
      }
    },
    doSlide (distance) {
      this.swiperEles.forEach((element, index) => {
        element.style.left = this.originalLeft + distance + 'px'
      })
    }

**3、后期优化**

上面实现了最基础的滑动翻页组件，算是第一版，后期还有很多需要优化的地方，比如每个.swiper元素的高度如果不统一，父级高度应该自适应；滑动时为了提升性能，不需要滑动所有.swiper元素，只需要滑动当前和即将要进入的两个元素即可等等。

[70]: /images/20220509/0d992d16702948ee8e66570c242a2a80.png