收藏
回答

横向scroll-view子元素宽度超过600导致的一系列问题

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

前提:

scroll-view作为页面顶部横向导航(scroll-x为true,scroll-with-animation为true,scroll-view在页面中为fixed定位,scroll-view的子元素总宽度超过600px)


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


1,通过设置scroll-left去改变scroll-view的当前位置。当一次设置的改变值(设置值 - 初始值)大于600(左右),滚动动画无法一次完成,在下一次页面刷新的Tick中才能完成滚动。

2,当前页面上拉至低端,真机上继续上拉进入即将回弹的模式。如果顶端fixed定位的scroll-view的子元素宽度超过600,当页面继续上拉高度超过scroll-view本身加上其到页面顶端的高度时,该scroll-view中的子元素会闪动消失。释放页面回弹后,子元素重新出现。经页面审查,该过程scroll-view元素本身未动,其子元素消失。


- 预期表现


1,无论scroll-view子元素横向宽度多长,能完成滚动动画,滚动至正确位置。


2,页面上拉,fixed定位的scroll-view元素中的子元素能正常显示。


- 复现路径


- 提供一个最简复现 Demo


<scroll-view class="tab_scroll_lay_fixed" scroll-with-animation="{{true}}" scroll-x scroll-left="{{scrollLeft}}">

    <view class="tab_item">标签很长很长很长</view>

<view class="tab_item">标签很长很长很长</view>

<view class="tab_item">标签很长很长很长</view>

<view class="tab_item">标签很长很长很长</view>

<view class="tab_item">标签很长很长很长</view>

<view class="tab_item">标签很长很长很长</view>

....

</scroll-view>


<view class="tab_item">标签很长很长很长</view>

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

5 个回答

  • 黄思程
    黄思程
    2018-09-14

    第二个确实能重现,小程序框架并没有对子元素做任何操作,看起来是 iOS 下 fixed 元素 + -webkit-overflow-scrolling: touch; 的渲染bug,写一个同样的示例跑在safari也有问题,暂时没找到有什么方法可以规避

    2018-09-14
    有用
    回复 1
    • Melody_zy
      Melody_zy
      2018-09-14

      好的,非常感谢。

      2018-09-14
      回复
  • 朱木木
    朱木木
    2020-06-12

    同问,在scroll-view里的外层div设置style动态宽度,不确定是不是超过600就不行,但是测试中760以上就不行,会有头部的一部分内容被吞掉,始终只能展示有限几百px。

    2020-06-12
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-09-11

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-09-11
    有用
    回复 7
    • Melody_zy
      Melody_zy
      2018-09-13

      wechatide://minicode/lxTm0omA7l2A

      2018-09-13
      回复
    • Melody_zy
      Melody_zy
      2018-09-13

      问题1没能复现,但问题2可以复现。

      2018-09-13
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-09-14回复Melody_zy

      你好,能否具体描述下问题,暂时未能复现

      2018-09-14
      回复
    • Melody_zy
      Melody_zy
      2018-09-14

      真机上当前页面上拉至页面底端,真机上继续上拉进入即将回弹的模式。如果顶端fixed定位的scroll-view的子元素宽度超过600,当页面继续上拉高度超过scroll-view本身加上其到页面顶端的高度时,该scroll-view中的子元素会闪动消失。释放页面回弹后,子元素重新出现。经页面审查,该过程scroll-view元素本身未动,其子元素消失。

      2018-09-14
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-09-14回复Melody_zy

      刚才Android机测试未能复现,现在在ios复现了,也麻烦按照要求来提供机型、微信版本

      2018-09-14
      回复
    查看更多(2)
  • 三世羽翾
    三世羽翾
    2018-09-11

    分享代码片段来说明问题https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2018-09-11
    有用
    回复
  • Melody_zy
    Melody_zy
    2018-09-11

    开始一直以为是代码写得有问题,经过很长一段时间的调试和真机测试后发现这个应该还是组件的问题,其中原理不明,请官方开发人员帮忙解惑一下

    2018-09-11
    有用
    回复
登录 后发表内容