element 在移动端可滑动切换

百事可乐☆

已于 2023-12-15 09:56:18 修改

阅读量1k

点赞数 10

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2023-12-06 17:55:49 首次发布

本文链接：https://blog.csdn.net/m0_61672533/article/details/134837770

本文介绍了如何在Vue项目中使用ElementUI的el-carousel组件实现触摸滑动事件控制，包括touchstart,touchmove,touchend，以及左右切换滑动图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-carousel class="carousel" :autoplay="false" ref="slideCarousel">
    <el-carousel-item v-for="(item, index) in cooList" :key="index">
              
    </el-carousel-item>
</el-carousel>

mounted(){
    this.slideBanner()
} ,


slideBanner() {
      var box = document.querySelector(".el-carousel__container");
      var startPointX = 0;
      var stopPointX = 0;
      var resetPoint = function() {
        startPointX = 0;
        stopPointX = 0;
      };
      box.addEventListener("touchstart", function(e) {
        startPointX = e.changedTouches[0].pageX;
      });
      box.addEventListener("touchmove", function(e) {
        stopPointX = e.changedTouches[0].pageX;
      });
      let that = this;
      box.addEventListener("touchend", function(e) {
        if (stopPointX == 0 || startPointX - stopPointX == 0) {
          resetPoint();
          return;
        }
        if (startPointX - stopPointX > 0) {
          resetPoint();
          that.$refs.slideCarousel.next();
          return;
        }
        if (startPointX - stopPointX < 0) {
          resetPoint();
          that.$refs.slideCarousel.prev();
          return;
        }
      });

代码可直接粘贴复用