小程序
小游戏
企业微信
微信支付
扫描小程序码分享
swiper内部用movable-view的话,movable-view放大之后拖动,也会带动swiper的移动,请问怎么解决呢?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
1,可以使用 movable-view 的 htouchmove 和 vtouchmove ,当 scale-value 大于1.5 时catch (htouchmove 、vtouchmove ) 这样就可以在图片放大时屏蔽掉 swiper,图片缩小后自动恢复 swiper 滑动
<movable-view wx:if="{{urlsLoaded[index]}}" class="proviewimage-movable" bindtap="multipleTap" bindscale="movableScale" direction="all" inertia scale catchhtouchmove="{{scaleValueTmp>1.5?'touchmove':''}}" catchvtouchmove="{{scaleValueTmp>1.5?'touchmove':''}}" scale-min="1" scale-max="{{scaleMax}}" scale-value="{{scaleValue}}"> </movable-view>
2,监听缩放事件,设置scaleValueTmp 的值
lastMovableScale:null, lastMovableScaleTime:null, movableScale(e){ this.lastMovableScale=e.detail if(this.lastMovableScaleTime){ clearTimeout(this.lastMovableScaleTime) } this.lastMovableScaleTime=setTimeout(()=>{ console.log('this.lastMovableScaleTime',this.lastMovableScale) this.setData({ scaleValueTmp:this.lastMovableScale.scale }) this.lastMovableScaleTime=null },100) },
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
1,可以使用 movable-view 的 htouchmove 和 vtouchmove ,当 scale-value 大于1.5 时catch (htouchmove 、vtouchmove ) 这样就可以在图片放大时屏蔽掉 swiper,图片缩小后自动恢复 swiper 滑动
<movable-view wx:if="{{urlsLoaded[index]}}" class="proviewimage-movable" bindtap="multipleTap" bindscale="movableScale" direction="all" inertia scale catchhtouchmove="{{scaleValueTmp>1.5?'touchmove':''}}" catchvtouchmove="{{scaleValueTmp>1.5?'touchmove':''}}" scale-min="1" scale-max="{{scaleMax}}" scale-value="{{scaleValue}}"> </movable-view>
2,监听缩放事件,设置scaleValueTmp 的值
lastMovableScale:null, lastMovableScaleTime:null, movableScale(e){ this.lastMovableScale=e.detail if(this.lastMovableScaleTime){ clearTimeout(this.lastMovableScaleTime) } this.lastMovableScaleTime=setTimeout(()=>{ console.log('this.lastMovableScaleTime',this.lastMovableScale) this.setData({ scaleValueTmp:this.lastMovableScale.scale }) this.lastMovableScaleTime=null },100) },