ionic V3.10 开发踩坑集锦(二)

1,703 阅读2分钟

GitHub地址:https://github.com/JerryMissTom ,欢迎关注

这是ionic 开发踩坑的第二篇文章,第一篇参见:ionic V3.10 开发踩坑集锦(一) ,开发环境与上文保持一致。

内容如下:

  1. 通过 ionic cordova run android 安装在手机上的APP,执行 window.open(url) 这段代码时不会跳转到本机自带的浏览器执行。但是通过 ionic cordova build android -prod 打包出来的APP执行此段代码,会跳转至本机自带的浏览器

  2. css文件和html文件引入assets中图片的路径设置如下:

   xx.scss
 .header {
        background: url("../assets/images/xxx.png") 
    }
xxx.html
 <img  src="assets/images/xxx.png">

这是因为最后打包出来的assets文件夹和index.html在一级,与包含main.cssbuild在一级

  1. TimePicker 弹出来的日期选择器时间显示有问题,在app.scss中添加如下代码即可:
.picker-ios .picker-opt{
  height: 45px; //大小自己调试
}
  1. ionic page 的生命周期中常用的两个是 ionViewDidLoadionViewDidEnter ,他们之间有区别的。ionViewDidLoad 只在页面创建的时候被触发一次,当页面创建后通过 NavController.push() 跳转至其他页面,然后再通过 NavController.pop() 跳转回来,此方法不会被触发,建议只在 此方法中执行页面初始化的操作。而 ionViewDidEnter 每次都会在页面显示的时候被触发,不管这个界面是否被cache。当业务要求每次进入某页面都执行同样操作时,需要在 ionViewDidEnter 写逻辑操作。

  2. 实现页面头部保持不动的方法,适配 AndroidiOS。 页面示意图如下,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初学者的小项目