Vant轮播加图片预览-解决轮播的滑动触发点击事件

广州湾兔老大

已于 2022-07-20 14:38:55 修改

阅读量2.3k

点赞数 2

分类专栏： vant 文章标签： css3 vue vue.js 前端 javascript

于 2021-12-29 17:15:00 首次发布

本文链接：https://blog.csdn.net/IT_Dilraba_bin/article/details/122218202

版权

vant 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vant轮播加图片预览

解决轮播的滑动触发点击事件

轮播一滑动的时候就会触发click事件，加上touchstart和touchmove事件做判断就会避免滑动事件和点击事件同时进行了

html部分

<template>
  <div class="IdeaDetails">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item
        v-for="(item, index) in ImageItem"
        :initial-swipe="current"
        :key="item.id"
      >
        <img
          :src="item.path"
          @click="showImagePreview(index)"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <van-image-preview
      v-model="ImagePreviewShow"
      :images="images"
      @change="onChange"
      :start-position="current"
      closeable
    >
      <template v-slot:index>第{{ index + 1 }}页</template>
    </van-image-preview>
  </div>
</template>

js部分

 
<script>
export default {
  created() {},
  data() {
    return {
      ImageItem: [],
      // 是否展示预览
      ImagePreviewShow: false,
      index: 0,
      // 预览图片数组
      images: [],
      current: 0,
      clickFlag: true,
    };
  },
  methods: {
    // 点击确定
    onChange(index) {
      this.index = index;
    },
    //显示预览图
    showImagePreview(index) {
      if (this.clickFlag) {
        this.ImagePreviewShow = true;
      }
      this.current = index;
    },
    onTouchStart() {
      this.clickFlag = true;
    },
    onTouchMove() {
      this.clickFlag = false;
    },
  },
};
</script>

css部分

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>