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

最新推荐文章于 2024-07-17 17:28:22 发布

latency_cheng

最新推荐文章于 2024-07-17 17:28:22 发布

阅读量3.1k

点赞数

分类专栏： JavaScript Vue 文章标签： JavaScript slider 滑动翻页 swiper

本文链接：https://blog.csdn.net/latency_cheng/article/details/82894296

版权

本文介绍了作者尝试实现一个轻量级的Vue滑动翻页组件swiper的过程，主要通过处理touchstart、touchmove、touchend事件来实现滑动效果。在touchstart记录初始坐标，touchmove中计算滑动距离并移动元素，touchend判断是否滑动一整页。代码实现部分详细阐述了页面结构、基本样式和事件监听。后续还有对组件的优化计划，如处理高度不一致的情况和提升滑动性能。

摘要由CSDN通过智能技术生成

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

1、主要思路

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

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

2、代码实现

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

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


<style lang='scss'>
.ths_swiper-wrap {
  white-space: nowrap;
  display: inline-block;
  font-size: 0;
  .swiper{
    position: relative;
    display: inline-block;
    width: 100vw;
    text-align: cent