【技巧】ionic3的小彩蛋

ionic里面有不少彩蛋——就是官网没有说明,但是可以用的,因为一段时间没用ionic做项目,所以一时想不起来,先列几个:

一、众所周知的

软键盘出现搜索按钮

form标签包含ion-searchbar即可。

解决非交互组件的点击延时

这类组件也是可以响应点击事件的,只是因为要判断是否有后续响应(如判断是否双击),会有几百ms的延时,这时加上tappable即可

关闭ios的webview下拉回弹

在config.xml添加配置:



二、较为隐藏的

输入框内容支持复制黏贴

ion-input包含在ion-item里面即可,而且如果不包,在ios可能还会出现问题。

组件使用某平台样式

一般我们在config里面的mode设置了平台后,主题风格就会是该平台,当我们某个组件想选用另一平台的样式时,它有mode属性时很容易实现,当没有的时候呢?其实,我们只要取现有样式名,换掉后缀,并添加即可,如ios平台ion-checkbox会生成checkbox-ios样式,一般只需给该控件加上checkbox-md类名即可变成android风格,因为它一般会覆盖原来的平台的样式(会存在风险,未必会百分百成功,慎用!!更合理的是移除原来平台类名,再添加新平台类名)。


还有更“伤心病狂”的在ts中用:

const actionSheet = this.actionSheetCtrl.create({
      title: '查询结果',
      cssClass: 'action-sheet-md'
});

主动触发下拉刷新

要在渲染后,不然refresher可能为未定义。

@ViewChild(Refresher) refresher: Refresher;
 ionViewDidLoad(){
    this.refresher._beginRefresh();
}

input相关组件的隐藏事件

像ion-searchbar、ion-input、ion-textarea等,都是有ionBlur、ionFocus、ionChange三个事件的,只是官方文档没有写……

textarea指定行数

使用官方的ion-textarea时,使用rows属性指令,如:


web版获取外部请求传递参数

const url: string = window.location.search;

……
想到再补充,或者大家知道的,麻烦也说一下。

你可能感兴趣的:(【技巧】ionic3的小彩蛋)