收藏
回答

scroll-view在ios10.3.3下表现不一致的问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 工具 7.0.4 2.6.6

scroll-view在flex布局下,设置height:10%,flex-grow:1,目的是让scrollview自动填充剩余的高度。在安卓端、IOS12和开发者工具中的模拟器下可以正常执行,但在IOS10的机型上会产生显示不完全的现象,仅显示10%可滚动的内容,但scrollview确实填充了剩余的高度。请求解决方法。出BUG的机型为ios10.3.3的iphone7与ios10.2.1的iphone6s,正常运行的机型为ios12.2的iphone7。


- wxss



- 当前 Bug 的表现(可附上截图)

    

- 预期表现

    -开发者工具

    

    -IOS12

    

最后一次编辑于  2019-05-14
回答关注问题邀请回答
收藏

3 个回答

  • 郭郭哒
    郭郭哒
    2019-09-17

    楼主你好,我也遇到了这个问题,一个同事的iPhone7,版本是10.1,应用已经是最新版本,就是scroll-view 的位置一点都出不来,其他的型号的手机都没有反馈像这样的问题,我用他的手机,一直测试,发现总有一部分内容出不来,这部分内容就包括这个scroll-view,很奇怪啊。

    2019-09-17
    有用
    回复 7
    • DasH
      DasH
      2019-09-18
      目前两个解决方法,1:根据窗口高度计算这个scroll-view 的高度,然后赋值。2:设置一个大概的百分比高度。
      2019-09-18
      回复
    • 郭郭哒
      郭郭哒
      2019-09-19回复DasH
      我是根据窗口高度设置的这个scroll-view的高度,但是iPhone7还是不显示,无论怎么调都不显示这部分内容,哎哭
      2019-09-19
      回复
    • DasH
      DasH
      2019-09-19回复郭郭哒
      这种情况我倒是没见过,或者可以使用view +overfollow :scroll 的方式处理。加上-webkit-overflow-scrolling: touch
      2019-09-19
      回复
    • 郭郭哒
      郭郭哒
      2019-09-19回复DasH
      嗯嗯,这种方法我也试过了,不过也还是没有什么用,就很奇怪。
      2019-09-19
      回复
    • 郭郭哒
      郭郭哒
      2019-09-19回复DasH
      一般应该不会因为ios版本的问题出现这样情况吧?暂时没有遇到过这种情况T==T
      2019-09-19
      回复
    查看更多(2)
  • 2019-05-15

    同问,我的也是这个问题,那天外面请来的测试是iphone7的10.3.3,微信已经更新到最新版本了,结果小程序里面所有的scroll-view都显示不全 ,当时的解决办法是先让他显示出来,然后overflow设置为auto,这样至少可以滚动没有问题,但是很生硬,并且不支持scroll-view的上拉加载和下拉刷新事件,就像是一个普通的view把overflow设置成auto一样的效果,就只能显示第一页的数据了,当时就没有进一步解决,因为还有其他问题,很忙,看到这个问题,希望官方查一下是什么原因。

    2019-05-15
    有用
    回复 3
    • DasH
      DasH
      2019-05-15

      我现在是手动计算一个height然后放到scrollview里面,暂时将就用着,还是希望能解决这个问题,每个scrollview都要算,真闹心。。。

      2019-05-15
      回复
    • 2019-05-15回复DasH

      总结了一下,这个问题:机型iphone7,固件版本10.3.3,微信版本,最新

      1,scroll-view元素高度响应不了css的flex布局,只有一点点高度;

      2,手动设置scroll-view高度以后,不能滚动,必须加上overflow:auto才能滚动;

      3,不支持滚动监听,不支持上拉加载和下拉刷新,scroll,scrolltolower,scrolltoupper三个事件都不响应,其表现就跟普通view元素一样

      2019-05-15
      回复
    • 子小柒
      子小柒
      2022-04-29
      scroll-view父节点是flex且flex-basis=auto,确实不能滚动,但在父节点加入display:flex;overflow:hidden; 在scroll-view节点加入样式 flex:1 1 auto;overflow:auto;后就正常了。 估计时IOS下的滚动无法得到flex盒子auto的高度,所以滚动高度错误导致。
      2022-04-29
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-05-14

    你好,麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)和具体的机型

    2019-05-14
    有用
    回复 9
    • DasH
      DasH
      2019-05-14

      出问题的机型是运行IOS10.3.3的iphone7与另一台运行ios10.2.1的iphone6s,正常运行的是IOS12.2的iphone7。 代码片段:https://developers.weixin.qq.com/s/87XOklmS7n8d

      2019-05-14
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-05-14回复DasH

      出BUG的机型为ios10.3.3的iphone7与ios10.2.1的iphone6s,这两个设备的微信版本是7.0.4么?

      2019-05-14
      回复
    • DasH
      DasH
      2019-05-15回复疯狂的小辣椒

      是的,都更新到了最新版本。

      2019-05-15
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-05-15回复DasH

      加上-webkit-试一下

      2019-05-15
      回复
    • DasH
      DasH
      2019-05-15回复疯狂的小辣椒

      添加了-webkit-flex 和 -webkit-flex-grow, 并没有变化,flex应该是有效的,元素本身已经铺满了剩余空间,只是scrollview的滚动区域被限制在了height:10%的范围。如果不设置高度而使用overflow:hidden,ios12完全正常,ios10能正常显示但不能滑动。 如果使用overflow:auto, IOS正常,但在安卓系统下体验不友好,没有滑动惯性,非常生硬。

      2019-05-15
      回复
    查看更多(4)
登录 后发表内容