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 serve或ionic build 出现内存溢出问题。 可以使用node --max-old-space-size=4096 $(which ionic) serve或build
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
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,有些情况需要额外注意,如赋值的时候
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;