收藏
回答

swiper和movable-view一起使用冲突?

swiper内部用movable-view的话,movable-view放大之后拖动,也会带动swiper的移动,请问怎么解决呢?

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

1 个回答

  • 〆
    2023-06-25

    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)
    
    },
    
    2023-06-25
    有用
    回复 1
    • xxp
      xxp
      2023-06-25
      好像不太行,我是用taro的,而且这样局限性太大了
      2023-06-25
      回复
登录 后发表内容