vue中通过JavaScript实现web端鼠标横向滑动&触控板滑动效果-demo

2023-07-28 21:20:12

JavaScript实现web端鼠标横向滑动&触控板滑动效果 

支持鼠标拖动滑动&触控板滑动效果

web端实现滑动，就是对鼠标按下、鼠标松开、鼠标移动事件进行监听

效果图 

 代码

结构代码

<template>
  <div class="swiper">
    <div class="container" ref="container">
      <!-- 在这里添加要滑动的横向元素 -->
      <div class="box" v-for="num in 40" :key="num">
        <img src="@/assets/logo.png" style="width: 58px; height: 58px" />
        <span>滑动元素{{ num }}</span>
      </div>
    </div>
  </div>
</template>

样式代码

<style lang="scss" scoped>
.swiper {
  .container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    /* white-space: nowrap; //避免子元素在父元素内换行 */
    overflow-x: auto; //显示横向滚动条
    /* scroll-snap-type: x mandatory; //自动吸附 */
    /* scroll-behavior: smooth; //平滑滚动的效果 */
    .box {
      width: 100px;
      min-height: 100px;
      padding: 0 20px;
      /* scroll-snap-align: start; //自动吸附 */
    }
  }
  ::-webkit-scrollbar {
    width: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
</style>

业务逻辑代码

<script setup>
import { ref, reactive, onMounted } from 'vue';
const container = ref(null);
// console.log(container);

const control = reactive({
  isDown: false, // 是否按下鼠标
  startX: 0, // 鼠标起始位置
  scrollLeft: 0 // 滚动条位置
});

onMounted(() => {
  console.log('dom', container.value);
  // 总结web端实现滑动，就是对鼠标按下、鼠标松开、鼠标移动事件进行监听
  container.value.addEventListener('mousedown', (e) => {
    control.isDown = true;
    control.startX = e.pageX - container.value.offsetLeft;
    control.scrollLeft = container.value.scrollLeft;
  });

  container.value.addEventListener('mouseup', (e) => {
    control.isDown = false;

    // // 找到最接近的滑动元素
    // const children = container.value.getElementsByClassName('box');
    // let closestElement;
    // let closestDistance = Infinity;
    // const containerCenterX = container.value.offsetWidth / 2;

    // for (let i = 0; i < children.length; i++) {
    //   const box = children[i];
    //   const boxCenterX = box.offsetLeft + box.offsetWidth / 2;
    //   const distance = Math.abs(boxCenterX - containerCenterX);

    //   if (distance < closestDistance) {
    //     closestDistance = distance;
    //     closestElement = box;
    //   }
    // }

    // // 计算滚动到最接近的滑动元素的位置
    // const scrollLeft =
    //   closestElement.offsetLeft -
    //   container.value.offsetWidth / 2 +
    //   closestElement.offsetWidth / 2;
    // container.value.scrollTo({ left: scrollLeft, behavior: 'smooth' });

    // 找到最接近的滑动元素
    // const children = container.value.getElementsByClassName('box');
    // let closestElement;
    // let closestDistance = Infinity;
    // const containerCenterX = container.value.offsetWidth / 2;

    // for (let i = 0; i < children.length; i++) {
    //   const box = children[i];
    //   const boxCenterX = box.offsetLeft + box.offsetWidth / 2;
    //   const distance = Math.abs(boxCenterX - containerCenterX);

    //   if (distance < closestDistance) {
    //     closestDistance = distance;
    //     closestElement = box;
    //   }
    // }

    // // 计算滚动到最接近的滑动元素的位置
    // // const scrollLeft = closestElement.offsetLeft - container.value.offsetLeft;
    // const scrollLeft =
    //   closestElement.offsetLeft -
    //   container.value.offsetLeft -
    //   closestElement.offsetWidth;
    // container.value.scrollTo({ left: scrollLeft, behavior: 'smooth' });
  });

  container.value.addEventListener('mousemove', (e) => {
    if (!control.isDown) return;
    e.preventDefault();
    const x = e.pageX - container.value.offsetLeft;
    const walk = (x - control.startX) * 2; // 滑动距离
    container.value.scrollLeft = control.scrollLeft - walk;
  });

  // 元素的吸附效果
  //   container.value.addEventListener('scroll', () => {
  //     // 找到最接近的滑动元素
  //     const children = container.value.getElementsByClassName('box');
  //     let closestElement;
  //     let closestDistance = Infinity;
  //     const containerCenterX = container.value.offsetWidth / 2;

  //     for (let i = 0; i < children.length; i++) {
  //       const box = children[i];
  //       const boxCenterX = box.offsetLeft + box.offsetWidth / 2;
  //       const distance = Math.abs(boxCenterX - containerCenterX);

  //       if (distance < closestDistance) {
  //         closestDistance = distance;
  //         closestElement = box;
  //       }
  //     }

  //     // 计算滚动到最接近的滑动元素的位置
  //     const scrollLeft = closestElement.offsetLeft - container.value.offsetLeft;
  //     container.value.scrollLeft = scrollLeft;
  //   });
});
</script>

在Vue中实现鼠标横向滑动&触控板滑动效果可以通过以下步骤实现：

  1. 首先在Vue中创建一个父组件，在该组件中引入子组件或者使用slot插入内容。

  2. 在父组件中创建一个div容器，用来包裹滑动内容。

  3. 在该div容器中绑定一个事件监听器，用来监听用户的鼠标或触摸板滑动事件。

  4. 在事件监听器中使用JavaScript获取鼠标或触摸板的滑动距离，并根据该距离计算出需要滑动的内容距离。

  5. 使用Vue的ref属性获取div容器，然后通过Vue的$refs属性访问该容器，并修改其left属性值，实现滑动效果。

下面是一个简单的示例代码：

<template>
  <div class="scroll-container" @mousemove="handleMouseMove" 
       @touchmove="handleTouchMove">
     <div class="scroll-content" ref="content">
       <slot></slot>
     </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseMove(event) {
      const scrollContent = this.$refs.content;
      const scrollSpeed = 5; // 滑动速度
      scrollContent.style.left = `${-event.pageX / scrollSpeed}px`;
    },
    handleTouchMove(event) {
      const scrollContent = this.$refs.content;
      const scrollSpeed = 5; // 滑动速度
      scrollContent.style.left = `${-event.touches[0].pageX / scrollSpeed}px`;
    },
  },
};
</script>

<style>
.scroll-container {
  width: 100%;
  height: 200px;
  overflow-x: scroll;
}

.scroll-content {
  position: relative;
  width: 2000px;
  height: 200px;
  white-space: nowrap;
  font-size: 0;
}
</style>

在上述示例代码中，我们创建了一个scroll-container容器并绑定了鼠标和触摸板的滑动事件监听器，然后使用JavaScript计算出需要滑动的距离，并修改了scroll-content容器的left属性值实现了滑动效果。需要注意的是，由于父组件的高度限制了滑动内容的高度，因此我们在scroll-content中使用了white-space: nowrap和font-size: 0两个CSS样式属性，防止滑动内容换行和出现空白间隙。

在Vue中实现横向滑动效果可以通过以下步骤实现：

  1. 在Vue组件中定义一个容器div，并设置其样式为横向滚动条，例如：
<div class="scroll-container" ref="scrollContainer">
   <div class="scroll-content">
      <!-- 滚动内容 -->
   </div>
</div>

<style>
   .scroll-container {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch; // 兼容iOS平滑滚动
   }

   .scroll-content {
      display: inline-block;
   }
</style>

在组件的created生命周期中，注册滑动事件监听器，并记录开始滑动时的鼠标位置或触摸位置：

created() {
   this.$refs.scrollContainer.addEventListener('mousedown', this.handleMouseDown);
   this.$refs.scrollContainer.addEventListener('touchstart', this.handleTouchStart, { passive: true });
},

methods: {
   handleMouseDown(event) {
      this.startX = event.clientX;
   },

   handleTouchStart(event) {
      this.startX = event.touches[0].clientX;
      this.touching = true;
   }
}

在组件的mounted生命周期中，注册滑动事件监听器，并根据滑动方向和滑动距离计算出滚动距离，并通过JavaScript控制滚动条的位置：

mounted() {
   this.$refs.scrollContainer.addEventListener('mousemove', this.handleMouseMove);
   this.$refs.scrollContainer.addEventListener('touchmove', this.handleTouchMove, { passive: false });
   this.$refs.scrollContainer.addEventListener('mouseup', this.handleMouseUp);
   this.$refs.scrollContainer.addEventListener('touchend', this.handleTouchEnd);
},

methods: {
   handleMouseMove(event) {
      if (this.startX) {
         const distance = event.clientX - this.startX;
         this.$refs.scrollContainer.scrollLeft -= distance;
         this.startX = event.clientX;
      }
   },

   handleTouchMove(event) {
      if (this.startX) {
         const distance = event.touches[0].clientX - this.startX;
         this.$refs.scrollContainer.scrollLeft -= distance;
         this.startX = event.touches[0].clientX;
      }
   },

   handleMouseUp() {
      this.startX = null;
   },

   handleTouchEnd() {
      this.startX = null;
   }
}

通过以上步骤，就可以在Vue中实现横向滑动效果，并且支持鼠标和触摸操作。如果需要支持惯性滑动效果，可以在滑动结束时根据滑动速度和滑动方向计算出滚动距离，并通过requestAnimationFrame动画函数实现平滑滚动效果。

可以通过以下步骤实现该功能：

绑定事件监听器，在vue组件的mounted生命周期函数或者created生命周期函数中，通过addEventListener方法绑定document的mousemove事件和touchmove事件。

mounted() {
  document.addEventListener('mousemove', this.handleMouseMove);
  document.addEventListener('touchmove', this.handleMouseMove);
},
methods: {
  handleMouseMove(event) {
    // 处理鼠标或者触摸板的移动事件
  }
}

在处理移动事件的函数中，根据元素的滑动距离和滑动方向，通过style属性的left或者transform属性改变元素的位置。其中，可以通过computed属性或者ref获取需要滑动的元素的位置和宽度。

handleMouseMove(event) {
  const delta = event.clientX - this.lastX;
  const direction = delta > 0 ? -1 : 1;
  const absDelta = Math.abs(delta);
  const containerLeft = this.$refs.container.offsetLeft;
  const containerWidth = this.$refs.container.offsetWidth;
  const contentWidth = this.$refs.content.offsetWidth;
  const maxDelta = contentWidth - containerWidth - containerLeft;
  const currentDelta = containerLeft + delta;

  if (absDelta > 5 && (currentDelta >= 0 || currentDelta <= maxDelta)) {
    // 通过transform改变滑动距离，可以有更好的性能表现
    this.$refs.container.style.transform = `translateX(${currentDelta}px)`;
    this.lastX = event.clientX;
  }
}

在滑动停止时，判断靠近开始的元素，通过计算元素到左端的距离来确定元素的位置，通过定位或者transform改变元素的位置。

handleMouseMove(event) {
  // ...
  this.timer = setTimeout(() => {
    const containerLeft = this.$refs.container.offsetLeft;
    const containerWidth = this.$refs.container.offsetWidth;
    const contentWidth = this.$refs.content.offsetWidth;
    const maxDelta = contentWidth - containerWidth - containerLeft;

    if (containerLeft < 0) {
      this.$refs.container.style.transform = `translateX(0)`;
      return;
    }

    if (maxDelta < 0) {
      this.$refs.container.style.transform = `translateX(${-maxDelta}px)`;
      return;
    }

    const items = this.$refs.content.children;
    let minDelta = Infinity;
    let index = 0;

    for (let i = 0; i < items.length; i++) {
      const itemLeft = items[i].offsetLeft;
      const delta = Math.abs(itemLeft - containerLeft);
      if (delta < minDelta) {
        minDelta = delta;
        index = i;
      }
    }

    const itemLeft = items[index].offsetLeft;
    const delta = itemLeft - containerLeft;
    this.$refs.container.style.transform = `translateX(${-delta}px)`;
  }, 100);
}

注意在组件销毁时，需要清除事件监听器和定时器。

beforeDestroy() {
  document.removeEventListener('mousemove', this.handleMouseMove);
  document.removeEventListener('touchmove', this.handleMouseMove);
  clearTimeout(this.timer);
}

完整的vue组件代码如下：

<template>
  <div class="container" ref="container">
    <div class="content" ref="content">
      <div class="item" v-for="(item, index) in items" :key="index">{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HorizontalScroll",
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"],
      lastX: 0,
      timer: null,
    };
  },
  mounted() {
    document.addEventListener('mousemove', this.handleMouseMove);
    document.addEventListener('touchmove', this.handleMouseMove);
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleMouseMove);
    document.removeEventListener('touchmove', this.handleMouseMove);
    clearTimeout(this.timer);
  },
  methods: {
    handleMouseMove(event) {
      const delta = event.clientX - this.lastX;
      const direction = delta > 0 ? -1 : 1;
      const absDelta = Math.abs(delta);
      const containerLeft = this.$refs.container.offsetLeft;
      const containerWidth = this.$refs.container.offsetWidth;
      const contentWidth = this.$refs.content.offsetWidth;
      const maxDelta = contentWidth - containerWidth - containerLeft;
      const currentDelta = containerLeft + delta;

      if (absDelta > 5 && (currentDelta >= 0 || currentDelta <= maxDelta)) {
        this.$refs.container.style.transform = `translateX(${currentDelta}px)`;
        this.lastX = event.clientX;
      }

      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        const containerLeft = this.$refs.container.offsetLeft;
        const containerWidth = this.$refs.container.offsetWidth;
        const contentWidth = this.$refs.content.offsetWidth;
        const maxDelta = contentWidth - containerWidth - containerLeft;

        if (containerLeft < 0) {
          this.$refs.container.style.transform = `translateX(0)`;
          return;
        }

        if (maxDelta < 0) {
          this.$refs.container.style.transform = `translateX(${-maxDelta}px)`;
          return;
        }

        const items = this.$refs.content.children;
        let minDelta = Infinity;
        let index = 0;

        for (let i = 0; i < items.length; i++) {
          const itemLeft = items[i].offsetLeft;
          const delta = Math.abs(itemLeft - containerLeft);
          if (delta < minDelta) {
            minDelta = delta;
            index = i;
          }
        }

        const itemLeft = items[index].offsetLeft;
        const delta = itemLeft - containerLeft;
        this.$refs.container.style.transform = `translateX(${-delta}px)`;
      }, 100);
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0 20px;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  white-space: nowrap;
}

.item {
  display: inline-block;
  height: 100%;
  line-height: 80px;
  padding: 0 10px;
  font-size: 16px;
  color: #333;
  background-color: #ddd;
  border-radius: 5px;
  margin-right: 10px;
}
</style>

更多推荐

Investigating Answerability of LLMs for Long-Form Question Answering

本文是LLM系列的文章，针对《InvestigatingAnswerabilityofLLMsforLong-FormQuestionAnswering》的翻译。LLM在长形式问答中的可回答性研究摘要1引言2相关工作3提出的评估方法4结果与分析5结论6局限性摘要随着我们进入LLM的新时代，了解它们的能力、局限性和差异变

性能测试 —— Jmeter 常用三种定时器

1、同步定时器位置：HTTP请求->定时器->SynchronizingTimer当需要进行大量用户的并发测试时，为了让用户能真正的同时执行，添加同步定时器，用户阻塞线程，知道线程数达到预先配置的数值，才开始执行取样器的操作测试绝对并发，比如秒杀，抢购等场景，结果要用聚合报告查看简单案例：模拟50个用户同时访问百度线程

zookeeper

目录1、zookeeper理论1.1、简介1.2、Zookeeper工作机制.1.3、Zookeeper特点**1.5、Zookeeper应用场景1.6、Zookeeper选举机制****1.6.1、第一次启动选举机制1.6.2、非第一次启动选举机制1.6.3、选举Leader规则：2、kafka2.1、概述2.2、为

Flutter的oktoast插件详解

文章目录简介详细介绍安装和导入导入在MaterialApp外面套一层OKToast组件为什么是包住MaterialApp？显示Toast消息：高级使用Toast位置Toast持续时间自定义Toast样式高级用法使用场景提示消息表单验证操作反馈网络请求状态调试信息小结总结简介oktoast是一个Flutter库，它提供了

vue项目嵌套安卓壳子打包apk

1.确保你的项目可以正常运行2.vue.config.jspublicPath添加一个publicPath:'./',3.需要下载一个HBuilderX编辑器下载地址：HBuilderX-高效极客技巧4.新建一个项目选择5+App创建完成之后删除掉红框内的文件只保留一个manifest.json5.把自己要变成app的

Java 函数式编程思考 —— 授人以渔

引言最近在使用函数式编程时，突然有了一点心得体会，简单说，用好了函数式编程，可以极大的实现方法调用的解耦，业务逻辑高度内聚，同时减少不必要的分支语句（if-else）。一、函数式编程就是Lambda表达式吗？Java语言早在JDK8就提供了函数式编程的基础。你可能会问，函数编程不就是lambda表达式吗？的确，大多数开

Three.js 实现导出模型文件（.glb,.gltf）功能 GLTFExporter

Three.js提供了导出（.glb,.gltf）文件的APIGLTFExporter用于实现场景内容导出模型文件的功能导出模型文件主要使用parse方法，该方法接收三个参数：1.scene：要导出的场景对象。2.onComplete：解析完成后的回调函数，接收一个参数result，表示解析后的glTF数据。3.opt

常用排序算法

一、插入排序1、直接插入排序2、折半插入排序3、希尔排序二、交换排序1、冒泡排序2、快速排序三、选择排序1、简单选择排序2、堆排序（1）调整堆（2）创建堆四、归并排序五、基数排序六、各种排序方法的比较将一组杂乱无章的数据按一定规律顺次排列起来（由小到大或由大到小)，即将无序序列排成一个有序序列的运算。排序方法的分类：一

展会预告 | 图扑邀您共聚 IOTE 国际物联网展·深圳站

参展时间：9月20日-22日图扑展位：9号馆9B35-1参展地址：深圳国际会展中心（宝安新馆）IOTE2023第二十届国际物联网展·深圳站，将于9月20日-22日在深圳国际会展中心（宝安）9、10、11号馆震撼来袭。本届展会以“IoT构建数字经济底座”为主题，将IoT技术引入实体经济领域，促进数字化转型和智能化升级，推

【运维】dockerfile 中的COPY 会覆盖文件夹吗

Dockerfile中的COPY命令会根据指定的源路径将文件或文件夹复制到容器中的目标路径。行为取决于两个因素：源路径和目标路径以及目标路径的类型。源路径是文件，目标路径是文件：如果源路径是文件，目标路径也是文件，则COPY命令会将源文件复制到目标路径，并覆盖目标路径中的任何现有文件。例如：COPY./source-f

中小企业生产信息化系统哪个好用？选亿发制造业管理系统提供商

中小型制造企业虽然规模相对较小，但同样是市场经济的重要组成部分。要在这个竞争环境中脱颖而出，智能化生产管理系统成为中小型制造企业不可或缺的工具。让各部门之间的数据无缝衔接，实现工厂的整体协调性和工作效率的大幅提升。让我们从几个关键方面来看中小型制造工厂如何选择适合的生产管理系统。生产计划管理：中小型工厂通常需要灵活的生

热文推荐
  1. 计算机视觉与深度学习-全连接神经网络-训练过程-批归一化- [北邮鲁鹏]

    文章目录思想批归一化操作批归一化与梯度消失经过BN处理算法实现思想直接对神经元的输出进行批归一化批归一化：对输出值进行归一化，将归一化结果平移缩放作为输出。批归一化操作小批量梯度下降算法回顾：每次迭代时会读入一批数据，比如32个样本；经过当前神经元后会有32个输出值y1,…y32。批归一化操作：对这32个输出进行减均值

  2. Java实现Modbus Tcp协议读写模拟工具数据

    标题前言一、读写模拟工具中数据(1)定义Controller层(2)定义Service层实现二、调试(1)读数据(2)向寄存器写单个数据(3)向寄存器写多个数据前言参考文章：https://www.cnblogs.com/ioufev/p/10831289.html该文中谈及常见的几种读取设备数据实现，说到modbus

  3. 【CNN-FPGA开源项目解析】01--floatMult16模块

    文章目录(基础)半精度浮点数的表示和乘运算16位半精度浮点数浮点数的乘运算floatMult16完整代码floatMult16代码逐步解析符号位sign判断指数exponent计算尾数fraction计算尾数fraction的标准化和舍位整合为最后的16位浮点数结果[sign,exponent,fraction]其他变

  4. MySQL数据库

    1、数据库的基本概念1.1数据·描述事物的符号记录·包括数字、文字、图形、图像、声音、档案记录等·以“记录”形式按统一的格式进行存储1.2表·将不同的记录组织在一起的·用来存储具体数据1.3数据库​​·表的集合，是存储数据的仓库·以一定的组织方式存储的相互有关的数据集合1.4数据库管理系统·是实现对数据库资源有效组织、

  5. C++面试/笔试准备，资料汇总

    文章目录后端太卷，建议往嵌入式，qt，测试，音视频，C++一些细分领域投简历。有任何疑问评论区聊，我看到了回复C++面试/笔试准备，资料汇总自我介绍项目实习尽可能有1.编程语言：一.熟悉C++语言，熟悉std::string的底层实现。string的底层实现（写时复制技术）1、引用&指针野指针2、C++中的继承，多态，

  6. 浅谈低压电力电容器常见故障分析及预防措施

    安科瑞华楠【摘要】为了可以有效实现提高电力电容器故障解决效率，就需要针对其故障诊断技术展开研究，而状态量监测作为提高故障诊断技术效率与质量重要因素，其对电力电容器故障诊断工作而言，有着重要影响意义。基于此，本文首先将会针对传统电力电容器故障诊断工作展开分析，而后针对基于状态量监测电力电容器故障诊断技术展开研究，进而制定

  7. 深入了解Vue.js框架：构建现代化的用户界面

    目录一.Vue前言介绍二.Vue.js框架的核心功能与特性三.MVVM的介绍四.Vue的生命周期五.库与框架的区别1.库（Library）：2.框架（Framework）：六.Vue常用指令演示1.v-model2.v-on:click（简写：@click）本篇博客将带你深入了解Vue.js框架的核心概念和强大功能互关

  8. ClickHouse进阶（十七）：clickhouse优化-写出查询优化

    进入正文前，感谢宝子们订阅专题、点赞、评论、收藏！关注IT贫道，获取高质量博客内容！🏡个人主页：含各种IT体系技术,IT贫道_大数据OLAP体系技术栈,ApacheDoris,Kerberos安全认证-CSDN博客📌订阅：拥抱独家专题，你的订阅将点燃我的创作热情！👍点赞：赞同优秀创作，你的点赞是对我创作最大的认可

  9. 【C++/Python】Windows用Swig实现C++调用Python（史上最简单详细，80岁看了都会操作）

    👉博__主👈：米码收割机👉技__能👈：C++/Python语言👉公众号👈：测试开发自动化【获取源码+商业合作】👉荣__誉👈：阿里云博客专家博主、51CTO技术博主👉专__注👈：专注主流机器人、人工智能等相关领域的开发、测试技术。#【C++/Python】Swig实现C++调用Python（史上最简单