@@ -40,7 +40,7 @@ Skyline 没有 BFC（块级格式化上下文），也没有 margin 合并机制
40402 . ** 兄弟节点间距只交给一侧负责** ：列表项之间统一使用后一项的 ` margin-top ` 或前一项的 ` margin-bottom ` ，避免双向 margin 叠加。
41413 . ** 首尾项差异化用模板状态标记** ：需要去掉首项或末项间距时，用 ` wx:class ` + ` index ` 显式绑定单类。
42424 . ** 不要把 BFC hack 当作 Skyline 布局手段** ：` overflow: hidden ` 在 Skyline 中仅用于裁剪，不再具备隔离 margin 的副作用。
43- 5 . ** 必要时显式声明纵向 Flex** ：容器内仍存在难以拆解的垂直 margin 关系时，可同时声明 ` display: flex ` 与 ` flex-direction: column ` , 使子节点作为 flex item 参与布局, 进一步避免垂直 margin 合并。
43+ 5 . ** 必要时显式声明纵向 Flex** ：容器内仍存在难以拆解的垂直 margin 关系时，可同时声明 ` display: flex ` 与 ` flex-direction: column ` ， 使子节点作为 flex item 参与布局， 进一步避免垂直 margin 合并。
4444
4545``` html
4646<!-- ❌ Bad — 依赖 overflow: hidden 创建 BFC 隔离父子 margin 合并 -->
@@ -49,7 +49,7 @@ Skyline 没有 BFC（块级格式化上下文），也没有 margin 合并机制
4949 <view class =" card-desc" view >
5050</view >
5151
52- <!-- ✅ Good — 父容器 padding 表达外沿空间, 兄弟间距交给单侧节点 -->
52+ <!-- ✅ Good — 父容器 padding 表达外沿空间， 兄弟间距交给单侧节点 -->
5353<view class =" card"
5454 <view class =" card-title" view >
5555 <view class =" card-desc" view >
@@ -67,7 +67,7 @@ Skyline 没有 BFC（块级格式化上下文），也没有 margin 合并机制
6767.card-desc { margin-top 16 rpx; }
6868```
6969
70- ** 列表场景** ：用 ` index > 0 ` 标记非首项, 只对非首项加 ` margin-top ` ：
70+ ** 列表场景** ：用 ` index > 0 ` 标记非首项， 只对非首项加 ` margin-top ` ：
7171
7272``` html
7373<view class =" list"
@@ -244,12 +244,12 @@ fixed-e (z-index: 4)
244244``` html
245245<!-- isSkyline 来自 renderer 判断，见 skyline-runtime-practice.md 的「判断当前渲染模式」 -->
246246<scroll-view type =" list" scroll-y =" true"
247- <!-- Skyline: sticky-section + sticky-header 组件 -->
247+ <!-- Skyline： sticky-section + sticky-header 组件 -->
248248 <sticky-section wx:if =" {{isSkyline}}"
249249 <sticky-header class =" sticky-title" sticky-header >
250250 <view >列表内容</view >
251251 </sticky-section >
252- <!-- WebView: 保留 position: sticky 原生写法 -->
252+ <!-- WebView： 保留 position: sticky 原生写法 -->
253253 <block wx:else >
254254 <view class =" sticky-title webview-sticky" view >
255255 <view >列表内容</view >
@@ -258,9 +258,9 @@ fixed-e (z-index: 4)
258258```
259259
260260``` css
261- /* 两端都需显式背景色, 避免吸顶时透字穿透 */
261+ /* 两端都需显式背景色， 避免吸顶时透字穿透 */
262262.sticky-title { background #fff ; }
263- /* WebView 专属: position: sticky 在 Skyline 下静默失效, 仅 WebView 分支使用 */
263+ /* WebView 专属： position: sticky 在 Skyline 下静默失效， 仅 WebView 分支使用 */
264264.webview-sticky { position sticky ; top 0 ; }
265265```
266266
@@ -417,7 +417,7 @@ watch(isShow, (val) => {
417417
418418** 多行省略** ：
419419
420- > 注意：文本省略场景下不要删除原 webview 下的文本省略样式，尤其是 ` display: -webkit-box; `
420+ > 注意：文本省略场景下不要删除原 WebView 下的文本省略样式，尤其是 ` display: -webkit-box; `
421421
422422``` html
423423<view class =" normal"
@@ -478,7 +478,7 @@ Skyline 下伪元素的 `animation` 不生效，需要改用真实节点。
478478
479479### animation API 不支持 → 使用 CSS transition
480480
481- Skyline 不支持 ` wx.createAnimation ` API（` animation ` 属性赋值方式），需要改用 CSS ` transition ` 或 worklet 动画。
481+ Skyline 不支持 ` wx.createAnimation ` API（` animation ` 属性赋值方式），需要改用 CSS ` transition ` 或 Worklet 动画。
482482
483483``` js
484484// ❌ Bad — wx.createAnimation 在 Skyline 下无效
@@ -517,22 +517,22 @@ Skyline 下 `text-decoration-line` 只取单值，`underline line-through` 这
517517```
518518
519519``` html
520- <!-- ✅ Good — 运行时判断: Skyline 嵌套 text 各承担一条装饰线; WebView 维持单节点双值 -->
521- <!-- 嵌套 text 的插值务必紧贴标签, text 节点会字面保留首尾空白 -->
520+ <!-- ✅ Good — 运行时判断： Skyline 嵌套 text 各承担一条装饰线； WebView 维持单节点双值 -->
521+ <!-- 嵌套 text 的插值务必紧贴标签， text 节点会字面保留首尾空白 -->
522522<text wx:if =" {{isSkyline}}" class =" underline" text class =" line-through" text ></text >
523523<text wx:else class =" dual-decoration" text >
524524```
525525
526526``` css
527- /* WebView: 单节点双值即可叠加两条线 */
527+ /* WebView： 单节点双值即可叠加两条线 */
528528.dual-decoration { text-decoration-line underline line-through ; }
529- /* Skyline: 外层节点画下划线, 内层节点画删除线, 嵌套后两条线同时生效 */
529+ /* Skyline： 外层节点画下划线， 内层节点画删除线， 嵌套后两条线同时生效 */
530530.underline { text-decoration-line underline ; }
531531.line-through { text-decoration-line line-through ; }
532532```
533533
534534``` js
535- // isSkyline 来自 renderer 判断, 在生命周期里写入 data 供模板使用
535+ // isSkyline 来自 renderer 判断， 在生命周期里写入 data 供模板使用
536536createPage ({
537537 data: {
538538 isSkyline: false
@@ -542,7 +542,7 @@ createPage({
542542 }
543543})
544544```
545- > 嵌套的内外层只设 ` text-decoration-line ` ，字号/颜色等由外层继承，避免重复声明导致两层样式打架。两条装饰线归属哪层不影响最终视觉，但内层文本节点要紧贴标签写, 防止 ` text ` 字面保留空白把价格文案撑出多余间距。
545+ > 嵌套的内外层只设 ` text-decoration-line ` ，字号/颜色等由外层继承，避免重复声明导致两层样式打架。两条装饰线归属哪层不影响最终视觉，但内层文本节点要紧贴标签写， 防止 ` text ` 字面保留空白把价格文案撑出多余间距。
546546
547547### flex 布局的子节点 min-width 百分比撑开失效
548548
@@ -698,29 +698,29 @@ Skyline 不支持 `@media screen` 的条件判断：`@media screen and (...)`
698698
699699✅ Good — 用 ` isSkyline ` 门控 Skyline 默认类与状态类，WebView 仍走原生 ` @media `
700700``` html
701- <!-- 仅 Skyline 加 .wrapper-skyline / .small; WebView 不加, 继续走原生 @media -->
701+ <!-- 仅 Skyline 加 .wrapper-skyline / .small； WebView 不加， 继续走原生 @media -->
702702<view wx:class =" wrapper {{ { 'wrapper-skyline': isSkyline, small: isSkyline && isSmall } }}" view >
703703```
704704
705705``` js
706- // isSkyline 来自 renderer 判断; isSmall 为屏宽快照
706+ // isSkyline 来自 renderer 判断； isSmall 为屏宽快照
707707const isSmall = ref (mpx .getWindowInfo ().screenWidth <= 320 )
708708```
709709
710710``` css
711- /* 默认态先声明, WebView 大屏与 Skyline 默认态都以此为基准 */
711+ /* 默认态先声明， WebView 大屏与 Skyline 默认态都以此为基准 */
712712.wrapper {
713713 display block ;
714714}
715715
716- /* WebView: 原生 @media 实时响应横竖屏/resize */
716+ /* WebView： 原生 @media 实时响应横竖屏/resize */
717717@media screen and (max-width : 320px ) {
718718 .wrapper { display none ; }
719719}
720720
721721/*
722- * Skyline: 上面的 @media 条件会被忽略, .wrapper { display: none; } 会泄漏为全局规则。
723- * 必须在 @media 之后声明 Skyline 默认类, 把非小屏状态覆盖回默认样式。
722+ * Skyline： 上面的 @media 条件会被忽略， .wrapper { display: none; } 会泄漏为全局规则。
723+ * 必须在 @media 之后声明 Skyline 默认类， 把非小屏状态覆盖回默认样式。
724724 */
725725.wrapper-skyline {
726726 display block ;
@@ -779,7 +779,7 @@ const isSmall = ref(mpx.getWindowInfo().screenWidth <= 320)
779779
780780### navigator 嵌套限制
781781
782- Skyline 下 ` <navigator> ` 内** 只能嵌套 ` <text> ` 组件或纯文本节点** ，** 不能嵌套** ` <view> ` / ` <image> ` / ` <swiper> ` 等任意其他组件。WebView 下常见的" navigator 内放图标 + 文字" 业务结构会让 Skyline 静默渲染异常（图标不显示，或点击区域错位）。
782+ Skyline 下 ` <navigator> ` 内** 只能嵌套 ` <text> ` 组件或纯文本节点** ，** 不能嵌套** ` <view> ` / ` <image> ` / ` <swiper> ` 等任意其他组件。WebView 下常见的“ navigator 内放图标 + 文字” 业务结构会让 Skyline 静默渲染异常（图标不显示，或点击区域错位）。
783783
784784``` html
785785<!-- ❌ Bad — navigator 内嵌 view + image 在 Skyline 下渲染异常 -->
0 commit comments