收藏
回答

多scroll-view联动不同步问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 需求 scroll-view 客户端 1.02.1907160 2.0.0

一个数据表需要3个scroll-view配合展示数据,如下图:(scroll-view)简称sv, 当sv1左右滑动时,要求sv3也同步左右滑动;当sv2上下滑动时,要求sv3也同步上下滑动;当sv3左右滑动时,要求sv1也同步左右滑动;当sv3上下滑动时,要求sv2下同步上下滑动;


问题:当其中一个sv被触动滑动效果时,与之联动的另一个sv没有及时同步跟着滑动,会产生错位现象。实现原理是::当其中一个sv被触动滑动时,该sv触发bindscroll事件,并在此事件中获取该sv的x,y坐标,用来改变与之关联的sv的scroll-left或scroll-top值。

如果能直接取消这3个scroll-view的手触动滑动效果,通过代码改变它们的scroll-left、scroll-top值,那么可以在它们的容器上面通过bindtouchmove事件来计算横纵滑动间距来同时改变其中任何两个sv的scroll-left或scroll-top值。但使用此方案前提必须要让图里的3个sv的手触滑动失效,目前没找到比较有效的办法让其手触滑动失效。

请教大神,有没有更好的解决方案?

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

3 个回答

  • 往事如风
    往事如风
    2022-06-18

    该问题已经解决,并且已经封闭为组件,需要的朋友可以访问本人的CSDN技术博客,上面有使用方法,及组件下载地址

    2022-06-18
    有用
    回复
  • 没有地址De信
    没有地址De信
    2019-09-28

    请问楼主解决了吗?我也和你同样的布局,也是实现同样的功能,也遇到了卡顿的问题,目前还是没有解决这个问题

    2019-09-28
    有用
    回复
  • Julytian
    Julytian
    2019-07-24

    你可以试下bindscroll使用wxs事件绑定,在wxs里面设置其他二个的style,wxs事件可以设置setStyle的,修改他们的transform。你可以参考下里面的案例。https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html

    2019-07-24
    有用
    回复 3
    • 往事如风
      往事如风
      2019-07-24
      好的,谢谢,可以参考
      2019-07-24
      回复
    • Coder   Chi
      Coder Chi
      2020-03-03回复往事如风
      请问楼主问题解决了么 我也遇到这个问题了 只是我实现的时候不知道怎么联动,我是SV2绑定一个左滑动事件 当SV2上下滑联动SV3上下滑 当SV1左右滑联动SV3左右滑 然后SV3绑定两个滑动事件  只是我调试结果不正常
      2020-03-03
      回复
    • zengbin
      zengbin
      2021-04-17
      我试过wxs事件绑定,还是会有卡顿,主要是scroll-view的bindscroll事件的数据不平滑
      2021-04-17
      回复
登录 后发表内容