mpvue img上的点击事件无效

Question

问题描述

基本功能是点击图片跳转到另一个页面，但是绑定的事件根本就没有用，没有执行绑定事件

问题出现的环境背景及自己尝试过哪些方法

我试过用@click.native来绑定，没有用；
也试过在img外面包一层div 然后把事件绑定在div上也是没有用，下面是绑定在div的代码

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div class="siwperContainer">

<swiper indicator-dots='true' autoplay='true' circular='true'>
  <div v-for="(book,idx) in top9Books" :key='idx'>
    <swiper-item class='si'>
      <div @click.native="bookDetail">
        <img :src="book.image" mode='aspectFit' class='swiperImg'>
      </div>
    </swiper-item>
  </div>
</swiper>

</div>
</template>

<script>
export default {
props: ['top9Books'],
computed: {

imgUrls () {
  let res = this.top9Books
  return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
}

},
methods: {

bookDetail () {
  console.log('click img')
  wx.navigateTo({
    url: '/pages/detail/main?id=' + 15
  })
}

}
}
</script>

<style>
.swiperContainer {
margin-top: 5px;
}
.si {
display: flex;
flex-direction: row;
}
.si div {
width: 33%;
height: 100%;
}
.swiperImg {
width: 100%;
height: 100%;
}
</style>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

亲，你搞定了吗？ 折腾这个坑我都弄到快4点了。。 目前暂时的解决方法是把@click放到<image>组件上。如果放到img或者div上点击都不响应。

Answer 2

你去掉 @click.native中的native试试。

Answer 3

不要把swiper放在组件中调用，放在index.vue中直接使用，tap事件是可以的，亲测可用