Ionic

1). 文件(包括图片等资源文件)添加或删除修改后需要ionic serve下,否则会有问题 2). 有引用变量时,慎用ngIf,如<div ngIf="xxx" #amap></div> 3). ngClass写法举例<div [ngClass]='{'th-hidden':needHidden}'> 4). 自定义控件实现双向绑定, 参考https://segmentfault.com/q/1010000010425511

//z-inn-search-view.html文件
<ion-searchbar mode="md" [(ngModel)]="searchInput" (ionClear)="clearSearch($event)"
                       (ionFocus)="focus($event)"
                       (ionInput)="onInput($event)"
                       placeholder="{{placeholder}}">
        </ion-searchbar>
        ...

//ts文件
    @Input() searchInput: string = "";                        //搜索内容
    @Output() searchInputChange = new EventEmitter;           //搜索内容        
    ...
    onInput(event){
        // this.doSearch.emit();
        this.searchInputChange.emit(this.searchInput);
    }
    
    //封装控件使用
    <z-inn-search-view placeholder="请输入关键字"
                           buttonTitle="查询"
                           [(searchInput)]="searchInputText"
                           (onFocus)="onFocus($event)"
                           (clearInput)="clearInput($event)"
                           (doSearch)="searchClick()">
    </z-inn-search-view>                

5). ionic可以使用sqlitService,兼容浏览器和真机。 浏览器可以用indexedDB调试? 个人没有测试。 6). ion-scroll里使用上拉加载,可以通过监听scroll的offset来自定义实现,关键代码: 7). 页面传值后回调

searchClick(){
        let _that = this;
        let callback = function (_params) {
            return new Promise((resolve, reject) => {
                if (_params) {
                    console.log(_params);
                    //处理参数回调
                }
                resolve();
            });
        };

        //跳转到新页面
        this.navCtrl.push('HousePreSaleSearchPage', {
            inputText: this.searchInputText,
            callback: callback
        });
    }

8). searchbar监听focus可以使用(ionFocus)="onFocus($event)"

9). 事件$event不可以以其他变量名替代

10). 如果ionic serveionic build 出现内存溢出问题。 可以使用node --max-old-space-size=4096 $(which ionic) servebuild

11). ion-header里放房动态内容(ngIf控制),页面跳转时,会有布局问题。

12). ngFor使用下标:

<div class="th-listitem" *ngFor="let item of progressNodes ;let i = index" [attr.data-index]="i">
{{item.name}}
</div>

13). 修复iOS safari浏览器 ion-input标签跳动的问题:

.input-cover{
    position:static;
}

14). iOS禁用ion-content滚动效果

//iOS 禁用滚动效果 https://github.com/ionic-team/ionic/issues/11584
.content-ios:not([no-bounce])>.scroll-content::before { bottom: 0; }

15). ion-datetime样式调整比较麻烦,可以放一个隐藏的ion-datetime

2018080124100pk.png

16). 隐藏list的右箭头detail-none。 添加可以使用detail-push指令。

<ion-list>
 <button ion-item detail-none *ngFor="let item of xxitems">
... 

17). 去除iOS safari上item点击300ms延迟,使用指令 tappale。 ion-item、div等需要,ion-button不需要

Amap

1). js api 的poi搜索,分页amapIndex是从1开始的 2). A-page push到B-page,两个页面都有地图;发现B退回到A时,地图重新加载。暂时没解决

js/ts

1). ===相比==,多了类型判断。 个人理解是 ==会先将类型转换为相同类型再进行比较

2). boolean值的判断,空字符串也是false,有些情况需要额外注意,如赋值的时候 2018072227882b.png

3). 闭包使用箭头函数 => 就不用声明 _that = this

4). 数组合并c = q.concat( b );q.push(...a)

5). false的几种情况: false / null / undefined / 0 / '' / NaN

6). 字符串转数字Number('71283')

7). safari不支持MM-dd-yyyy之类的格式,new Date("2014-03-09")得到的是invalid date。 可以将-替换成/参考

Css

1). fixed是相对于整个布局的

2). display:block和 text-align:center有啥关系??

3). 控制水平居中的一个方法,可以配合margin-left负偏移使用:

.box{
position:absolute;
width:400px;
left:50%;
margin-left:-200px;
}

4). img控制居中、左、右

.alignleft{
   diplay:inline;
   float:left;
}
.alignright{
   diplay:inline;
   float:right;
}
.aligncenter{
   clear:both;
   display:block;
   margin:auto;
}

5). 水平居中使用vertical-aligen:middle;