发表于 |

移动端 h5 全屏内容，往往根据设备不同有安全区域的概念，特别是在 ios 设备尤为需要注意；以下总结了一个全屏内容的 h5 页面通用方案；

注意点：

  1. constant(safe-area-inset-bottom) 和 env(safe-area-inset-bottom) 对 bottom 属性无效，需要加载 padding-bottom 类似属性上。
  2. 100vh 是包含安全区域的，但是可视区不包含安全区域（虽然安全区域在可视区内），所以设置height 为 100vh 会触发页面滚动。
  3. 安全区如果没有被遮挡，显示的是 html-body 的背景色。
阅读全文 »

发表于 |

umi项目如果，出现很多 children 相关的类型问题的，先尝试在 package 里显示依赖 @types/react: ^17.0.0，然后 git add . && git clean -dfx && tnpm i 重装依赖试试；如果问题仍然存在，在 package 的 resolutions 里锁定一下 @types/react: ^17.0.0。

原因：部分 @types/react: * 依赖安装了 react 18 的 types，react 18 类型中移除了默认的 children，需用 withChildren。

发表于 |

滚动条样式覆盖

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  &::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    height: 0px;
    display: block;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 4px;
  }
}

发表于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
  * <Row gutter={[12, 12]}>
  *  <Col span={6}>
  *  </Col>
  * </Row>
  */
.row {
  display: flex;
  flex-flow: row wrap;
  row-gap: 12px; /** gutter[1]的值 */
  margin-left: -6px; /** (-gutter[0]/2)的值 */
  margin-right: -6px; /** (-gutter[0]/2)的值 */
}

.col {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 6px; /** (gutter[0]/2)的值 */
}

发表于 |

reactive

定义响应式的函数，和vue2的名称一致，但是实现原理从 Object.defineProperty 变成了 Proxy。

Proxy 使用对象代理的方式，比 Object.defineProperty 有两个明显好处。

  1. Proxy可以动态添加属性，并且添加的属性支持响应式，比如 obj = {}, obj.name = ‘jack’; vue2的响应式只能在原有属性的基础上，添加新属性需要使用 Vue.set(obj, ‘name’, ‘jack’) — ugly code!

  2. Proxy使用的是懒加载的方式，只有在用到的时候才会触发getter，vue2的话在初始化的时候就必须定义好响应式的数据结构，性能没有那么好。