调试基础库: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做临时解决办法。
1、真机调试还不支持的
2、absolute 布局需要父级是 absolute 或 relative,如果还不行提供个代码片段
因为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,能解决此问题。
简单说,如果需要 sticky 布局 ,可以使用 sticky-section 做 scroll-view 的直接子元素。如果不需要时,就不用了。
我有个项目模版,已经运行在线上了,你可以参考下。近期我会找个时间开源下。
代码片段:https://developers.weixin.qq.com/s/jN9Fp3md7RLW
这里又涉及到一个问题,如果不是长列表有没有必要采用skyline渲染?如果需要,那么对于非长列表页面,又需要在直接子节点中使用相对或者绝对布局,那么我上面的那种方式算是折中的解决方法。
另外,sticky-section和sticky-header在需要兼容webview的情况下它们作用在哪?
适配两天了,还没适配成功一个页面,崩溃。。。
https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/migration/compatibility.html
2、sticky 可以使用 sticky-section / sticky-header 来实现
https://developers.weixin.qq.com/miniprogram/dev/component/sticky-section.html