|
|
@@ -0,0 +1,96 @@
|
|
|
+---
|
|
|
+alwaysApply: true
|
|
|
+---
|
|
|
+
|
|
|
+### 样式兼容性规范 - gap 属性处理
|
|
|
+
|
|
|
+#### 概述
|
|
|
+`gap` 属性在 UNI-APP 的 APP 环境中兼容性差，本规范说明如何正确处理间距问题。
|
|
|
+
|
|
|
+#### gap 属性的兼容性问题
|
|
|
+
|
|
|
+**⚠️ 避免使用 gap 属性**
|
|
|
+- `gap` 属性在 APP 环境中（特别是 nvue）可能不生效
|
|
|
+- 微信小程序对 `gap` 的支持有限制
|
|
|
+- 不同平台表现不一致，容易导致布局错乱
|
|
|
+
|
|
|
+#### 推荐做法：使用 margin 代替 gap
|
|
|
+
|
|
|
+**❌ 不推荐的写法**
|
|
|
+```scss
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+ gap: 20upx; // APP 中可能不生效
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**✅ 推荐的写法**
|
|
|
+```scss
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.item {
|
|
|
+ margin-top: 20upx;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+#### 动态间距类的正确写法
|
|
|
+
|
|
|
+**以协议类组件为例**
|
|
|
+```vue
|
|
|
+<template>
|
|
|
+ <view class="content-wrapper">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in items"
|
|
|
+ :key="index"
|
|
|
+ :class="{
|
|
|
+ 'content-item': true,
|
|
|
+ 'hasGap': item.gap === 2,
|
|
|
+ 'noGap': item.gap !== 2
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ {{ item.content }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content-item {
|
|
|
+ padding: 15upx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.hasGap {
|
|
|
+ margin-top: 40upx;
|
|
|
+}
|
|
|
+
|
|
|
+.noGap {
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+</style>
|
|
|
+```
|
|
|
+
|
|
|
+#### 条件编译处理 APP 差异
|
|
|
+
|
|
|
+如果需要区分 APP 和小程序的间距值：
|
|
|
+
|
|
|
+```scss
|
|
|
+.hasGap {
|
|
|
+ margin-top: 40upx; // 小程序默认值
|
|
|
+
|
|
|
+ /* #ifdef APP-PLUS */
|
|
|
+ margin-top: 50upx; // APP 可能需要更大间距
|
|
|
+ /* #endif */
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+#### 检查清单
|
|
|
+
|
|
|
+- [ ] 代码中是否使用了 `gap` 属性？→ 改用 `margin`
|
|
|
+- [ ] 是否为 Flex 容器的第一个子元素设置了 `margin: 0`？
|
|
|
+- [ ] 是否需要针对 APP 调整间距值？→ 使用条件编译
|
