专栏首页ionic3+【技巧】ionic3底部Tab居中圆形凸出按钮

【技巧】ionic3底部Tab居中圆形凸出按钮

好久没做ionic3了,在简书草稿箱发现这个闲置了很久将至一年的文章,遂发出来。

效果图是这样:

image.png

首先这是ios样式修改的,所以在app.module.ts中指定为ios模式:

    IonicModule.forRoot(MyApp, {
      mode: 'ios'
    })

然后html部分:

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

注意,居中项不放tabTitle,这样就只会有一个图标,且自动有一个.icon-only样式,而其他项是不会有这个样式的。

然后针对这个样式改写scss部分:

.tabs-ios{
    .tab-button.icon-only{
        position:relative;
        overflow:visible;
        text-align:center;
        left:0;
        .tab-button-icon{
            width:70px;
            height:70px;
            line-height: 60px;
            margin-top: -12px;
            background:skyblue;
            border-radius:50%;
            border:5px solid #fff;
            box-shadow:0 -2px 3px rgba(100,100,100,.4);
        }
    }
}

然后便大功告成了,是不是很简单?想再美化一下的自行调整吧。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ionic4底部Tab居中圆形凸出按钮

    IT晴天
  • 【技巧】ionic3独享滚动区域之滑动segment

    其实这两个列表是公用ion-content的滚动条的,也就是说,当列表1滚动到一定距离,当切换到列表2显示时,列表2已滚动到列表1所在的位置了(效果图我就不上了...

    IT晴天
  • 【技巧】ionic3的小彩蛋

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

    IT晴天
  • 开发部署移动APP如何选择腾讯云服务器配置?

    开发部署移动APP如何选择腾讯云服务器配置呢?随着移动互联网的飞速发展,智能手机的逐渐普及,现在大部分人用的手机都是智能手机,大家在手机上安装自己喜欢和常用的a...

    用户2416682
  • 开发部署移动APP如何选择腾讯云服务器配置?

    开发部署移动APP如何选择腾讯云服务器配置呢?随着移动互联网的飞速发展,智能手机的逐渐普及,现在大部分人用的手机都是智能手机,大家在手机上安装自己喜欢和常用的a...

    用户5920959
  • 渗透某摄像头系统

    lonelyvaf
  • ROS_Kinetic_19 群机器人框架示例(micros swarm framework)

    ROS_Kinetic_19 群机器人框架示例(micros swarm framework)

    zhangrelay
  • 深入分析:12C ASM Normal冗余中PDB文件块号与AU关系与恢复

    在 10G 和 11G 中,DBA 可以根据文件名,确定这个文件在 ASM 磁盘组上的分布,然后 dd 出来每一个 AU,最后拼凑成一个完成的数据文件。

    数据和云
  • 【开源】gnet: 一个轻量级且高性能的 Golang 网络库

    gnet 是一个基于 Event-Loop 事件驱动的高性能和轻量级网络库。这个库直接使用 epoll 和 kqueue 系统调用而非标准 Golang 网络包...

    潘少
  • 从全球联接指数报告看华为的战略意图

    虽然华为HCC大会已经过去一段时间了,但是关于华为的讨论和热议一直在继续,在会上华为展示了自已高科技上的技术成果,还对外发布了自已从ICT到IT公司的定位,而最...

    人称T客

扫码关注云+社区

领取腾讯云代金券