收藏
回答

scroll-view滚动时防止底层页面穿透问题

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

这是存在时间很长的一个问题了,以前看到不少人都反映过,在下也参与过讨论,但是不明白的是为什么官方一直都不解决


页面内在拥有scroll-view的时候,在scroll-view滚动到底时接着滑动会触发底层页面的滚动效果,这就让人很蛋疼了,这也太扯了,滑动事件竟然可以穿透,而且无法阻止。所以就变成下面这样了




而正常情况下应该是这样的



不要误会,那个标题栏并不是一直以固定的方式在那里的,而是页面滚动到一定位置或者选择弹窗打开的时候才固定在那里


看到有人的回答说底层页面也用scroll-view代替,嗯,没错,这样确实可以防止穿透,可是我需要底层页面的上拉和下拉刷新事件啊,这很重要而且必须,但是scroll-view并不拥有这两种事件。就算官方说以后考虑加,先不说他加不加,以微信官方的这个效率什么时候能做好,光是我去替换的工作量都很大,你们可能无法想象我们的小程序现在首页的隐藏交互有多么互杂......


至于为什么最近我又重提起这个问题了,又涉及到另一个存在已久的交互问题了,在mac开发者工具和android机上,固定在页面顶部的组件会随着下拉刷新事件而一起向下滚动,惊不惊喜?意不意外?




还想再问一句?


到底能不能把这个滑动穿透给禁止了?


至于另一个下拉刷新的问题,你们看心情办就行~

最后一次编辑于  2018-10-18
回答关注问题邀请回答
收藏

11 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-09

    这里简单介绍小程序scroll-view的一种解决方式

    常用阻止滚动方式

    在不使用scroll-view的弹窗中, 为position为absolute或fixed的元素设置catchtouchmove空事件就可以阻止弹窗下的页面因事件穿透滚动

    1

    <view catchtouchmove="doNothing"></view>


    2021-06-09
    有用 1
    回复
  • 粤A靓仔
    粤A靓仔
    2020-07-15

    我也有个类似的问题,scroll-view里面的内容左右滑动的的时候同时也会出发scroll-view的滑动事件,搞死人,加什么鬼都没用

    2020-07-15
    有用
    回复
  • 睡前原谅一切
    睡前原谅一切
    2020-06-10

    使用page-mata设置 overflow: hidden or visible可解决。

    2020-06-10
    有用
    回复
  • 啊喵
    啊喵
    2019-02-15

    插眼,遇到一模一样的问题,由于导航是滚动吸顶的,又不能弹起浮层时把底部高度变100%,说到底都是这个scroll滑动穿透的问题,现在开发工具2.32以上倒是可在外层加catchtouchmove解决,但6.7的手机还是会有这个问题,7.0以上未测过。我现在只能是任由它滑,导航吸顶多一个判断,不至于断头。。。

    2019-02-15
    有用
    回复
  • 且听风吟
    且听风吟
    2018-10-19

    不然webview

    2018-10-19
    有用
    回复 2
  • NicholasWong
    NicholasWong
    2018-09-07

    微信官方想做自己的“vue”框架,结果精髓都没有学到

    2018-09-07
    有用
    回复
  • 乔英杰
    乔英杰
    2018-09-04

    也是深受其扰,希望官方能重视。

    2018-09-04
    有用
    回复 1
    • Z
      Z
      2018-09-05

      emmm.........

      这次好像又是被官方忽略了,不知道是真的没看见,还是假装没看见

      2018-09-05
      回复
  • WGinit
    WGinit
    2018-08-31

    想请教下兄弟已经解决下拉刷新问题么

    2018-08-31
    有用
    回复 2
    • Z
      Z
      2018-08-31

      没有,底层的问题,没有办法解决

      2018-08-31
      回复
    • WGinit
      WGinit
      2018-09-01回复Z

      难受,我弃用了,穿透阻止下拉刷新用wx.stopPullDownRefresh()暂时替代了


      2018-09-01
      回复
  • ꯭小꯭白꯭
    ꯭小꯭白꯭
    2018-08-30

    结构:

    <scroll-view scroll-y="{{判断条件?' ':'true'}}" >

    </scroll-view>

    样式:

    page{

    height: 100%;

    overflow-y:hidden;

    }

    scroll-view {

    height: 100%;

    }

    什么时候要禁止滚动,文档上有漏洞 ,scroll-y 和 scroll-x 默认值是 false,但判断条件里不能写false要写个 ‘ ’(空)


    2018-08-30
    有用
    回复 2
    • 2018-08-31

      兄弟,在组件的属性是布尔值的时候,你这么写'true'和'false',最后都会转换成true了

      在{{}}里布尔值不要加引号啊,要写的话应该这么写

      "{{flag ? true : false}}"

      还有就是,你这样写三元运算没有意义啊

      直接这么写就行了啊

      <scroll-view scroll-y="{{!flag}}" >

      </scroll-view>


      2018-08-31
      1
      回复
    • Z
      Z
      2018-08-31

      这个方法问题里我有提到,我在很早期的时候也用过这个组件,但因为早期的scroll-view 的一些bug和 scroll-view的上拉下拉的事件体验不好这两个原因,使得我放弃了这个组件,也是无奈之举

      2018-08-31
      回复
  • 雨轩
    雨轩
    2018-08-30
    catchtouchmove="{{true}}"

    view中添加这个吧,先想办法将就用一下。

    2018-08-30
    有用
    回复 1
    • Z
      Z
      2018-08-30

      试过了,不适合我的需求,还是那个问题,首页的交互过于复杂

      2018-08-30
      回复

正在加载...

登录 后发表内容