全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

近期Ionic技术点汇总

2021年2月18日 517点热度 0人点赞 0条评论

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

 

一、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过后,点返回键不能够再返回,通常用在登陆页。

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小技巧
最后更新:2021年2月18日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号