【技巧】ionic3的小彩蛋

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

一、众所周知的

软键盘出现搜索按钮

form标签包含ion-searchbar即可。

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

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

二、较为隐藏的

输入框内容支持复制黏贴

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

组件使用某平台样式

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

<ion-checkbox class="checkbox-md"></ion-checkbox>

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

  let 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属性指令,如:

<ion-textarea placeholder="说点什么吧" rows="6"></ion-textarea>

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

let url: string = window.location.search;

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区