收藏
回答

怎么实现轮播图可以双指放大和缩放?

类似微信朋友圈相册轮播和放大的功能怎么实现?目前是swiper+movable-area嵌套movable-view实现,但是一直有问题,movable-area在移动的时间就触发了swiper的滑动,请教大佬!

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

5 个回答

  • 1
    1
    2023-12-21

    楼主实现效果了吗。我也碰到这个问题了。现在很急哇

    2023-12-21
    有用
    回复
  • Ding
    Ding
    2023-07-20

    你catch 住 moveable view 的 move 事件,就能阻止 swiper 滚动了。同时也会导致 moveable view 的移动失效,需要你自己再做移动。

    2023-07-20
    有用
    回复
  • 大熊
    大熊
    2023-07-20

    swiper + movable-view



    2023-07-20
    有用
    回复 4
    • 🍪
      🍪
      2023-07-20
      movable-area放大图片后在移动的时间就触发了swiper的滑动
      2023-07-20
      回复
    • 大熊
      大熊
      2023-07-20回复🍪
      ,可以使用 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-07-20
      回复
    • 🍪
      🍪
      2023-07-20
      谢谢,我试一下
      2023-07-20
      回复
    • 没头发和不生气
      没头发和不生气
      2023-09-01回复🍪
      试了一下不好使,楼主解决了吗
      2023-09-01
      回复
  • CRMEB
    CRMEB
    2023-07-20

    请参考:https://developers.weixin.qq.com/community/develop/article/doc/0006cee2a902b060ed00a3a346c013

    2023-07-20
    有用
    回复
  • 大山
    大山
    2023-07-20

    swiper+wx.previewImage 不可以?

    2023-07-20
    有用
    回复 2
    • 🍪
      🍪
      2023-07-20
      主要是想实现轮播的同时可以双指缩放,比如像贝壳,安居客,淘宝这些的效果
      2023-07-20
      回复
    • 🍪
      🍪
      2023-07-20
      在放大的时候页面上需要显示一些标签,wx.previewImage无法往页面添加内容
      2023-07-20
      回复
登录 后发表内容