近期Ionic技术点汇总

整个春节都没有更新博客，今天已经开工了，博客也要开始更新起来了。这篇文章主要就把前段时间遇到的各种技术问题做一个汇总，因为遇到的都是些小问题，单独写一篇也不够。

一、ionic给ion-item设置内边距

ionic自带的ion-item组件很好用，但是很多时候我们都要按照设计稿上的边距来进行设计，经过多番尝试我发现，如果我们要去掉ion-item的左右内边距要用下面的代码才行：

  ion-item{
​    --padding-start: 0;
​    --inner-padding-end: 0;
  }

二、ionic通过navController跳转的时候传参数的方法

this.navController.navigateForward('path', {queryParams: {name: 'lipsuper'}});

要在目标页面取得该参数的话：

this.activatedRoute.queryParams.subscribe(data => {
      this.username = data.name;
    });

三、设置input框进入页面的时候自动对焦

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, IonInput } from '@ionic/angular';

...

export class MyPage implements OnInit {
  // 这里的input这个名字是自己在html页面上通过#input定义的，你可以自定义
  @ViewChild ('input', {static: true}) input: IonInput;
  ngOnInit() {
  }
    
  // 自动对焦的代码写在ngOnInit()方法里面是不行的
  ionViewDidEnter() {
    this.input.setFocus();
  }

}

四、Ionic使用NavController跳转到某一个页面后，怎样防止点击返回按钮的时候返回到该页面

 this.navController.navigateForward('/tabs/tab1', {replaceUrl: true});

这样我们通过一个replaceUrl属性就可以使用户跳转到tab1过后，点返回键不能够再返回，通常用在登陆页。