收藏
回答

swiper 和 movable-view一起使用,缩放拖动图片,冲突,怎么解决?

双指缩放放大图片之后,拖动图片,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>


回答关注问题邀请回答
收藏

5 个回答

  • 🇻 🇰 🇮 🇳 🇬ʷᵃⁿᵍ
    🇻 🇰 🇮 🇳 🇬ʷᵃⁿᵍ
    2020-04-13

    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,演示效果

    2020-04-13
    有用 3
    回复
  • 卢霄霄
    卢霄霄
    2019-10-10

    movable-area上面加个 catchtouchmove会不会好一点

    2019-10-10
    有用 1
    回复 20
    • 张怀
      张怀
      2019-10-10
      那 swiper怎么翻页?
      2019-10-10
      回复
    • 张怀
      张怀
      2019-10-10
      我想实现看图片轮播,双指缩放
      2019-10-10
      回复
    • 卢霄霄
      卢霄霄
      2019-10-10回复张怀
      加到 movable-view上?
      2019-10-10
      回复
    • 张怀
      张怀
      2019-10-10
      都不行。不知道其他小程序怎么搞的
      2019-10-10
      回复
    • 卢霄霄
      卢霄霄
      2019-10-10回复张怀
      来个代码片段吧 我帮你改好
      2019-10-10
      回复
    查看更多(15)
  • 三月三荷
    三月三荷
    2020-07-06

    用这两个就好了 各位

    2020-07-06
    有用
    回复
  • 「与一人白首
    「与一人白首
    2020-03-16

    请问楼主解决了吗?

    2020-03-16
    有用
    回复
  • 拳心的小聪忙
    拳心的小聪忙
    2020-01-06

    请问楼主解决了吗?

    2020-01-06
    有用
    回复
登录 后发表内容
问题标签