0%

第三周知识记录

发表于 更新于

倒计时的优化

1
new Date(0) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)

一直以为是 00:00:00

无限下拉加载组件

判断下拉组件是否出现在可视窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
eleInView(element) {
      const {
        top,
        right,
        bottom,
        left,
        width,
        height
      } = element.getBoundingClientRect();

      const intersection = {
        t: bottom,
        r: window.innerWidth - left,
        //减去 footer 的高
        b: window.innerHeight - top - 44,
        l: right
      };

      return (
        intersection.t > 0 &&
        intersection.r > 0 &&
        intersection.b > 0 &&
        intersection.l > 0
      );
}

getBoundingClientRect() 该方法返回元素的大小及其相对于视口的位置。

由于我们有一个 footer 组件高 44 将其减去，若为正数这代表出现在视口，此时代表需要去服务器获取更多的数据，但是一个组件他是不会知道他将去那里获取数据的，所以我们将他获取的数据的方法从父组件传递过来

1
2
3
4
5
6
props: {
    handler: {
      type: Function,
      required: true
    }
}

在下拉组件出现在视口时，执行 handler()

对响应式原理更加熟悉

实习队友提出的问题当时也没有反应过来，后面一问发现最开始给的是空对象就想到了，由于 js 的一些原因，Vue 不能检测到对象属性的添加或删除。

同时在数组也是有一些限制的

  1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如：vm.items.length = newLength

生命周期钩子

对生命周期还是没有熟练的记忆，对于在适合的时候使用适合的钩子还是不够熟练，需要多想多用

beforeCreate 与 created

Firefox Experiments I Would Have Liked to Try

关于九宫格抽奖组件的调研

iphone X 适配

面對iPhone X，Web設計師需要知道的幾個CSS屬性

iPhone X的Web设计

1
<meta name="viewport" content="viewport-fit=cover">

这样就能全覆盖，而不留下白色安全区，但是有的东西会被异形屏所遮盖。safe-area-inset-*来保证边界

1
2
3
4
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

使用 ref 去获取样式是只能获取直接写在元素本上上的 <div style="">

视网膜屏 1px 兼容性

用 CSS 定义 1px 的实线边框，在 window.devicePixelRatio=2 的屏幕上会显示成 2px，在 window.devicePixelRatio=3 的屏幕上会显示成 3px，明明希望是极细的线条，到 Retina 屏上却变得粗大丑陋。这是因为 CSS 中的 px 单位定义的是逻辑像素值，而实际显示的效果会以物理像素呈现，Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异。

可以动态 rem

ios

  • 设置 border-width: 0.5px
1
2
3
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {    .border { border: 0.5px solid #999 }}
@media screen and (-webkit-min-device-pixel-ratio: 3) {    .border { border: 0.333333px solid #999 }}

遗憾的是 只有iOS 8+ 支持 0.5px

  • scale

对于devicePixelRatio >= 2的设备，在需要加边线的元素上使用after伪元素，尺寸设置为1px,然后使用transform:scale进行缩小0.5倍操作：

Transitions vs Animations

CSS animation和transition的性能探究

使用 CSS transitions

使用 CSS 动画