前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【技巧】ionic3的小彩蛋

【技巧】ionic3的小彩蛋

作者头像
IT晴天
发布2018-08-20 10:30:36
6160
发布2018-08-20 10:30:36
举报
文章被收录于专栏:ionic3+ionic3+

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

一、众所周知的

软键盘出现搜索按钮

form标签包含ion-searchbar即可。

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

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

二、较为隐藏的

输入框内容支持复制黏贴

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

组件使用某平台样式

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

代码语言:javascript
复制
<ion-checkbox class="checkbox-md"></ion-checkbox>

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

代码语言:javascript
复制
  let actionSheet = this.actionSheetCtrl.create({
      title: '查询结果',
      cssClass: 'action-sheet-md'
});
主动触发下拉刷新

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

代码语言:javascript
复制
@ViewChild(Refresher) refresher: Refresher;
 ionViewDidLoad(){
    this.refresher._beginRefresh();
}
input相关组件的隐藏事件

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

textarea指定行数

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

代码语言:javascript
复制
<ion-textarea placeholder="说点什么吧" rows="6"></ion-textarea>
web版获取外部请求传递参数

let url: string = window.location.search;

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.09.27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、众所周知的
    • 软键盘出现搜索按钮
      • 解决非交互组件的点击延时
      • 二、较为隐藏的
        • 输入框内容支持复制黏贴
          • 组件使用某平台样式
            • 主动触发下拉刷新
              • input相关组件的隐藏事件
                • textarea指定行数
                  • web版获取外部请求传递参数
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档