解决mpvue 中使用swiper轮播组件tap事件没触发问题

  • A+

在使用mpvue的过程中,自己的组件中使用了swiper轮播组件,但是想实现点击图片进行预览,却发现image 的tap事件竟然无法触发,后来查了一下问题,原来mpvue封装的组件在事件传递的时候会存在问题;

解决办法:https://github.com/Meituan-Dianping/mpvue/issues/734

把swiper组件直接放在 index.vue 中,即可

index.vue

  1. <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000" circular="true">
  2.       <block v-for="(item, index) in swiperList" :index="index" :key="key">
  3.         <swiper-item  >
  4.           <image @tap="previewImg" :src="item.screenshot" :data-src="item.screenshot" class="slide-image" mode="aspectFill"/>
  5.         </swiper-item>
  6.       </block>
  7.     </swiper>

index.vue的js

  1. previewImg (e) { // 图片预览
  2.         console.log('tupian', e)
  3.         var current = e.currentTarget.dataset.src
  4.         wx.previewImage({
  5.           current: current,
  6.           urls: [current]
  7.         })
  8.       },

 

 

 

 

weinxin
我的微信
这是我的微信扫一扫
kiven

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: