GitHub地址:https://github.com/JerryMissTom ,欢迎关注
这是ionic 开发踩坑的第二篇文章,第一篇参见:ionic V3.10 开发踩坑集锦(一) ,开发环境与上文保持一致。
内容如下:
-
通过
ionic cordova run android
安装在手机上的APP,执行window.open(url)
这段代码时不会跳转到本机自带的浏览器执行。但是通过ionic cordova build android -prod
打包出来的APP执行此段代码,会跳转至本机自带的浏览器 -
在
css
文件和html
文件引入assets
中图片的路径设置如下:
xx.scss
.header {
background: url("../assets/images/xxx.png")
}
xxx.html
<img src="assets/images/xxx.png">
这是因为最后打包出来的assets
文件夹和index.html
在一级,与包含main.css
的build
在一级
- TimePicker 弹出来的日期选择器时间显示有问题,在
app.scss
中添加如下代码即可:
.picker-ios .picker-opt{
height: 45px; //大小自己调试
}
-
ionic page
的生命周期中常用的两个是ionViewDidLoad
和ionViewDidEnter
,他们之间有区别的。ionViewDidLoad
只在页面创建的时候被触发一次,当页面创建后通过NavController.push()
跳转至其他页面,然后再通过NavController.pop()
跳转回来,此方法不会被触发,建议只在 此方法中执行页面初始化的操作。而ionViewDidEnter
每次都会在页面显示的时候被触发,不管这个界面是否被cache。当业务要求每次进入某页面都执行同样操作时,需要在ionViewDidEnter
写逻辑操作。 -
实现页面头部保持不动的方法,适配
Android
和iOS
。 页面示意图如下,main中的list向上滑动时,header的位置保持不动,固定在头部。:
html代码如下:
<ion-header>
<ion-navbar>
<ion-title>
title
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div [class.ios-list-header]="version==='ios'" [class.android-list-header]="version==='android'">
header
</div>
<div [class.android-list-content-top]="version==='android'">
main/list
</div>
</ion-content>
ts文件获取平台的代码如下:
import { Platform } from 'ionic-angular';
private version:string;
constructor(private platform: Platform) {
if (this.platform.is('android')) {
this.version = 'android';
}
else if (this.platform.is('ios')) {
this.version= 'ios';
}
}
scss文件如下:
.ios-list-header {
width: 100%;
height: 80px;
position: sticky;
z-index: 1;
top: 0;
}
.android-list-header {
width: 100%;
height: 80px;
position: fixed;
z-index: 1;
top: 54px;
}
.android-list-content-top {
margin-top: 80px !important;
}
ion-header
标签无论在哪个平台都是固定在最上面的。但是在 ion-content
中固定头部内容, iOS 直接使用 sticky
就可以了,由于 Chrome
不支持这个属性,所以我们使用 fixed
来代替,同时还要设置 main
至头部的距离,以免被 header
遮挡住。
推荐
最后推荐下我写的ionic的小项目,具体可以参见 适合ionic初学者的小项目