收藏
回答

skyline渲染position的absolute有问题,fixed模式跟webview不一致?

调试基础库:3.0.2

开发者工具版本:Nightly 1.06.2309072,RC 1.06.2308291

操作系统及版本:Windows 11 专业版 22000.2360


skyline渲染下absolute布局无效,无法根据父组件进行定位。fixed布局在skyline下会占据文档空间,而webview渲染下fixed布局是不会占据文档空间的,这就造成无法两者兼容。


补充一下:经过一段时间的摸索,skyline渲染模式下,scroll-view的直接子节点无法absolute和relactive布局,可包裹一层relative布局的view做临时解决办法。

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

2 个回答

  • 夏味
    夏味
    2023-09-12

    1、真机调试还不支持的

    2、absolute 布局需要父级是 absolute 或 relative,如果还不行提供个代码片段

    2023-09-12
    有用
    回复 9
    • 肝胃
      肝胃
      2023-09-13
      感谢这位兄弟的提醒,我在准备代码段的时候发现代码段的样例代码提供了一种解决思路,大概是这样的:


      因为skyline支持滚动需要用scroll-view,所以页面布局结构是父元素page、子元素scroll-view(及顶部标题栏,如果需要的话),子元素内还需要加一个view包裹整个scroll-view,所以结构及样式就如下:
      <scroll-view class="scroll-area" scroll-y="true" type="list">
        <view class="container">
      这里是页面的所有内容,内容中不管是relative或者absolute布局,都可以随着整个页面上下滚动,使skyline和webview渲染保持一致。
        </view>
      </scroll-view>

      page {
        display: flex;
        flex-direction: colum;
        height: 100vh;


        .scroll-view {
          flex: 1;
          overflow-y: hidden;


          .container {
            // 注意这里用height和min-height的区别
            min-height: 100%;
            position: relative;
          }
        }
      }


      将页面采用flex容器的另一个好处是scroll-view不需要指定高度,之前用box容器的时候总是要去计算scroll-view的高度。这点还是挺人性化的。


      另外发现一个skyline和webview不一致的地方,是margin坍陷。比如父元素margin-top:10px;子元素也margin-top:10rpx;在skyline渲染中,子元素的marin-top不生效,webview是生效的。这种情况下需要将子元素改用padding-top,能解决此问题。
      2023-09-13
      回复
    • 黄思程
      黄思程
      2023-09-13回复肝胃
      这种结构利用不到 skyline 的性能优势,可以参考 https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/best-practice.html#%E4%BC%98%E5%8C%96%E9%95%BF%E5%88%97%E8%A1%A8%E6%80%A7%E8%83%BD
      2023-09-13
      回复
    • 夏味
      夏味
      2023-09-13回复肝胃
      你这个思路目前行不通,首先 scroll-view 的直接子元素,目前还不支持 min-height。其次,这么干会影响性能,如楼上所说。


      简单说,如果需要 sticky 布局 ,可以使用 sticky-section 做  scroll-view 的直接子元素。如果不需要时,就不用了。


      我有个项目模版,已经运行在线上了,你可以参考下。近期我会找个时间开源下。


      代码片段:https://developers.weixin.qq.com/s/jN9Fp3md7RLW
      2023-09-13
      回复
    • 肝胃
      肝胃
      2023-09-13回复黄思程
      现在的问题是,scroll-view在skyline渲染模式下,直接子节点的relactive和absolute布局都是不支持的,我不知道这是bug还是设计上的原因。


      这里又涉及到一个问题,如果不是长列表有没有必要采用skyline渲染?如果需要,那么对于非长列表页面,又需要在直接子节点中使用相对或者绝对布局,那么我上面的那种方式算是折中的解决方法。


      另外,sticky-section和sticky-header在需要兼容webview的情况下它们作用在哪?
      2023-09-13
      回复
    • 肝胃
      肝胃
      2023-09-13回复夏味
      这种方式只是不能发挥skyline的长列表性能,在不是长列表的情况下,可以解决scroll-view直接子节点无法进行relactive和absolute定位的问题。
      2023-09-13
      回复
    查看更多(4)
  • 肝胃
    肝胃
    2023-09-11

    适配两天了,还没适配成功一个页面,崩溃。。。

    2023-09-11
    有用
    回复 6
    查看更多(1)
登录 后发表内容