bingcool

小小梦想,技术改变世界

ionic-自定义指令标志红点

如果生活欺骗了你,请不要灰心,因为下一秒不知道会发生什么事,也许是好的,也许是让你更灰心的,然而对于你,你依然要生活,吃饭,谈笑风声。


下面说一说如何通过ionic实现一个红点标志信息。
我们知道现在的很多app,当信息有变动时,系统会及时通知我们有信息变态,一般会在标签处定义一个红点,有一些甚至直接标出一个圆的红点包括有多少条动态信息,比如微博。
我们要实现的功能其实也是差不多的,如下图:

可以看到,其实ionic的tab标签有一个badge的标签可以很容易实现这个功能
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" ui-sref="tab.dash" badge="12" badge-style="badge-assertive">
    <ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>

可以看到,直接赋值badge=12,选择样式badge-style="badge-assertive"(也就是红点),那么在加载的时候就会显示成如下这个样子:



其实我们可以把badge=12替换成一个变量,这个变量我们就可以在controller来执行与服务端的通信获取值,然后再赋值显示出来,这样子就可以与逻辑业务整合起来,动态显示,比如badge="num",变量'num'就可以在controller中通过$scope.num = 12 赋值。同时需要注意,badge的值大于0才会显示红点,等于0的话,红点不会显示的。

这一个功能是ionic已经帮我们封装好了,可以很方便的使用,但是像下面的在tab标签上只是标注一个红点,代表有信息更新的时候,这个就需要自己写代码实现了。



其实我们可以分析ionic的badge的一些方法就可以很容易的获取到一些关键的知识点,
创建一个指令:
.directive('tabRedPoint', function($compile, $timeout){
   return {
      restrict: 'A', 
      replace: false,
      link: function(scope, element, attrs, controller) {
          var key = attrs.tabRedPoint || false;
          var template ="<span ng-class={true:'tabs-red-point',false:''}["+key+"]></span>";
          var $class = 'a.'+attrs.class;
          var html = $compile(template)(scope);
          $timeout(function() {
              $($class).css({
                  "position":'relative',
              }).append(html);
          
          },100);
                     
       }
   };
})
在ion-tab中定义使用这个指令,它的用途就是在tab的实际标签中添加一个字元素,也就是var template ="<span ng-class={true:'tabs-red-point',false:''}["+key+"]></span>"这个模板,然后将它的父元素设为"position":'relative',那么这个子元素就可以相对于父元素执行绝对定位了。那么可以定义tabs-red-point类,根据var key = attrs.tabRedPoint || false,也就是指令的值来决定是否显示tabs-red-point,指令值等于true时,执行tabs-red-point类样色,false时,不显示。那么我们需要定义tabs-red-point类的样色。
.tabs-red-point {
  position: absolute;
  top: 4%;
  right: calc(50% - 16px);
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background-color: red
}


那么整个用法:
<ion-tab class="tab-has-red-point" title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.account" tab-red-point="isActive">
    <ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
必须要定义一个类,在这里我定义为class="tab-has-red-point",这个类名可以随意,但是不要在每一个tab中都定义相同的类,因为这个类var $class = 'a.'+attrs.class,最终就是相当于那个父级元素,确定唯一的父级元素。

tab-red-point="isActive"这个是指令,isActive是变量,可以在controller中通过$scope.isActive来设置true或者false,当然true或者false是由是否存在动态信息而设定的。

(2)如果在头部的信息通知栏中有一些设置的信息更新时,那么又该如何设置呢?

如下图:




同样,我们也是定义一个指令head-red-point
.directive('headRedPoint', function($compile, $timeout){
   // Runs during compile
   return {
      restrict: 'A', 
      replace: false,
      link: function(scope, element, attrs, controller) {
          var key = attrs.headRedPoint || false;
          var template ="<span ng-class={true:'tabs-red-point',false:''}["+key+"]></span>";
          var html = $compile(template)(scope);  
          $timeout(function() {
            var test = angular.element(element).parent().append(html)
          },100)
                     
       }
   };
})
head-red-point指令实现的功能和上面的标签基本是一样的,也是在一个父级的元素下添加一个圆点的子元素,当然,这个圆点的之元素相对于父元素绝对定位的。

tabs-red-point依然是上面定义的类。指令的值等于true时,显示红点,指令的值等于false时不显示红点。


例如用法
<ion-nav-buttons side="right">
    <button class="button button-icon" ng-click="popovershow()" head-red-point='true'><i class="icon ion-ios-more"></i></button>
</ion-nav-buttons>






















阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012979009/article/details/52668480
文章标签: ionic directive
个人分类: ionic框架
想对作者说点什么? 我来说一句

ionic3学习笔记

ioinc入门

kassiaaaa kassiaaaa

2017-10-24 18:25:17

阅读数:2869

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭