双指缩放放大图片之后,拖动图片,swiper也生效,变成上一页下一页了
<swiper class="swiper" skip-hidden-item-layout current="{{current}}">
<block wx:for="{{groupList}}" wx:key="{{item.id}}">
<swiper-item>
<movable-area class="swiper" scale-area>
<movable-view class="swiper" direction="all" out-of-bounds scale scale-min="1" scale-max="4" scale-value="1" >
<image lazy-load src="{{item.url}}" mode="aspectFit"></image>
</movable-view>
</movable-area>
</swiper-item>
</block>
</swiper>
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) },
3,演示效果
movable-area上面加个 catchtouchmove会不会好一点
用这两个就好了 各位
请问楼主解决了吗?
请问楼主解决了吗?