zoukankan      html  css  js  c++  java
  • Ionic 中badge的应用

    app中如果有服务端推送过来的消息,用户没有查看的话,出现一个数字提醒,类似微信的那种效果。

    在Ionic中的实现过程还是很简单的:

      <ion-tab title="首页" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/home" badge="badges.carts" badge-style="badge-assertive">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

    其中最主要的部分是: badge="badges.carts" badge-style="badge-assertive"

    这里的 badges.carts不同于以往的用{{表达式}},不需要"{{}}"部分,直接写属性即可

    在controller里定义以下代码

    $scope.badges = { carts: 4 };

    如果carts的值为0的话,是不会有提示的,如果>0,才会出现红色圆点提示。

    通过这样设置 $scope.badges变量,我们就可以根据业务的需要进行灵活的操作了,果然是很方便。

  • 相关阅读:
    mysql常用命令
    CSS样式
    定位
    background
    文本属性和字体属性
    超链接导航案例
    margin塌陷
    浮动
    GIT 修改提交地址
    VUE ElementUI 表格多选框实现单选
  • 原文地址:https://www.cnblogs.com/crazyguo/p/6015516.html
Copyright © 2011-2022 走看看