Vue H5页面种长按与v-for联合使用

Vue H5页面种长按与v-for联合使用

部分代码展示 html

<div v-for="(item, index) in imgList" :key="index">
        <div class="banner" @touchstart="myTouch(item, index)">
          <!-- <div id="vant-pop" v-show="shows" @click="maskHandle"></div>
      <img id="vant-img" src="../../assets/zpshanchu.png" v-show="shows" alt="" @click="deleHandle" /> -->
          <van-overlay
            style="position: absolute; border-radius: 6px"
            :show="shows"
            v-if="active === index"
            @click="maskHandle"
          >
            <!-- <img style="" src="../../assets/zpshanchu.png" alt="" @click="deleHandle"> -->
            <div class="wrapper">
              <img
                style="height: 44px"
                src="../../assets/zpshanchu.png"
                alt=""
                @click="deleHandle(item)"
              />
            </div>
          </van-overlay>

部分代码展示js

 myTouch(val, index) {
      // 长按
      // var square = document.querySelector('.banner');
      // var hammer = new Hammer(square);

      // hammer.on("press", function (ev) {
      //   if (ev.type === "press") {
      //     // 获取要处理的消息Id
      //     val.shows = true;
      //   }
      // });
      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
      this.loop = setTimeout(() => {
        console.log(val);
        console.log(val.shows);
        this.active = index;
      }, 800);
    },

定义事件

@touchstart="myTouch(item, index)

使用事件

myTouch(val, index) {
     
      clearTimeout(this.loop); //再次清空定时器，防止重复注册定时器
      this.loop = setTimeout(() => {
        console.log(val);
        console.log(val.shows);
        this.active = index;
      }, 800);
    },