记H5活动遇到的坑

从项目转型到H5兼项目，期间做了一些H5，此处记录下做H5遇到的一些坑。

一 微信返回上一页，IOS系统不能刷新，导致屏蔽分享无效

解决方法

IOS下

1
2
3
4
5
6
7
8
9
10

var isPageHide = false;
window.addEventListener('pageshow', function () {
    if (isPageHide) {
        window.location.reload();
    }
});
window.addEventListener('pagehide', function () {
    isPageHide = true;
});

Android：

1
2
3
4
5
6
7
8
9
10
11

//需要被刷新的页面放上以下代码
$(function () {
    var needRefresh = sessionStorage.getItem("need-refresh");
    if(needRefresh){
        sessionStorage.removeItem("need-refresh");
        location.reload();
    }
});
//跳转的页面放上以下代码
sessionStorage.setItem("need-refresh", true);

阅读全文 🤔

Flex属性整理

简单整理Flex的属性导图

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
flex基本概念
    -- 轴
        --  主轴       main axis
        --  交叉轴     cross axis
    -- 容器
        -- 父容器      contanier
        -- 子容器      children

容器
    -- 父容器contanier
        -- justify-content      设置子容器在主轴上的对齐方式
            -- flex-start       起始端对齐
            -- flex-end         末尾段对齐
            -- center           居中对齐
            -- space-around     子容器目两侧的间隔相。位于首尾两端的子容器到父容器的距离是子容器间距的一半。
            -- space-between    两端对齐，子容器之间的间隔都相等。

        -- align-items          设置子容器在交叉轴上的对齐方式
            -- flex-start       起始端对齐
            -- flex-end         末尾段对齐
            -- center           居中对齐
            -- baseline         子容器的第一行文字的基线对齐
            -- stretch（默认）   如果项目未设置高度或设为auto，子容器拉伸至将占满整个容器的高度。

        -- flex-direction       设置主轴的方向（即项目的排列方向）
            -- row（默认值）      主轴为水平方向，起点在左端
            -- row-reverse      主轴为水平方向，起点在右端
            -- column           主轴为垂直方向，起点在上沿
            -- column-reverse   主轴为垂直方向，起点在下沿

        -- flex-wrap            设置换行方式
            -- nowrap           不换行
            -- wrap             换行
            -- wrap-reverse     换行，第一行在下方
        -- flex-flow            flex-direction 与 flex-wrap 的缩写

        -- align-content
            -- flex-start
            -- flex-end
            -- center
            -- space-between
            -- space-around
            -- stretch


    -- 子容器children
        -- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
            -- 一个值：
                -- 带单位        flex-basis: 10em | 10px | 10rem | 10%
                -- 无单位        flex-grow: 1 (定义项目的放大比例，默认为0)
                -- none:        0 0 auto
                -- auto:        1 1 auto
            -- 两个值：
                -- flex-frow flex-basix : 1 10rem
                -- flex-grow flex-shink : 1 1
            -- 三个值：
                -- flex-grow flex-shrink flex-basis: 1 1 10rem

        -- align-self
            -- flex-start       起始端对齐
            -- flex-end         末尾段对齐
            -- center           居中对齐
            -- baseline         子容器的第一行文字的基线对齐
            -- stretch（默认）   拉伸对齐

        -- order                改变子容器的排列顺序, 数值越小排列越靠前。默认值为 0，可以为负值。

        -- flex-grow            子容器弹性伸展的比例 默认为0

        -- flex-shrink          子容器弹性收缩的比例 默认为1

        -- flex-basis           子容器的原始固定尺寸

ionic3与angular4做App之坑

最近用ionic3和angular4做一个App，涉及的知识比较多，也上手了typescript。下面记录下遇到的坑。

一 用angular的ngClass切换class时，在iPhone上点击会闪烁

这个class是控制页面是否能够滚动的，就是一个样式overflow： hidden。

1
2
3
4
5
<ion-content [ngClass]="{'f-no-scroll': isShowMenu}">
······
<button class="menu" ion-button clear tappable (click)="toggleMenu($event)">
    <ion-icon name="menu"></ion-icon>
</button>

1
2
3
4
5
.f-no-scroll {
  .scroll-content {
    overflow: hidden;
  }
}

在浏览器上是不会闪的，没想到在app上面，点击按钮显示菜单的时候，竟然会闪烁，把[ngClass]=”{‘f-no-scroll’: isShowMenu}”这段去掉后，就不闪烁了，应该是设置overflow的时候，导致了重排reflow。

阅读全文 🤔

JavaScript易漏基础笔记（不断学习不断更新）

最近一段时间在重温JavaScript基础，温故而知新，记录下一些容易漏掉的细节。

一 对象

hasOwnProperty()：

如果in判断一个属性存在，这个属性不一定是改实例的，它可能是该实例继承得到的；
要判断一个属性是否是自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法。

1
2
3
4
5
let obj = {
    name: 'xxx'
};
obj.hasOwnProperty('name'); // true
obj.hasOwnProperty('toString'); // false

阅读全文 🤔