Wie implementiert man Tabs im MVVM-Stil in AngularJS? Fall + Code

Wir wissen, dass Tabs einer der am häufigsten verwendeten Effekte in modernen Webseiten sind. Dieses Mal zeigen wir Ihnen, wie Sie Tabs im MVVM-Stil in Angularjs implementieren. Fall + Code, das Folgende ist ein praktischer Fall, schauen wir uns das an.

Der Schwerpunkt dieses Artikels liegt auf der Verwendung von AngularJS, einem sehr beliebten MVVM-Framework, um den Tab-Effekt zu erzielen. Lassen Sie uns vorher unsere häufig verwendete JQuery-Implementierung entfernen.

1. jquery implementiert einen einfachen und groben Tab-Effekt

var nav = $(".tabs");//tab切换var box = $(".box");//容器nav.on("click", function(){ //点击事件
  var this_index=$(this).index();
  $(this).addClass("active").siblings().removeClass("active");
  box.eq(this_index).show().siblings().hide();
});

Hier wird nur der Kernteil von js angegeben, und HTML und CSS werden nicht im Detail beschrieben.
Der obige Code implementiert den Tab-Effekt einfach und grob. Er verwendet das Click-Ereignis, um elem.index() abzurufen, und verbindet den Index und den Container, um die Anzeige und das Ausblenden zu steuern.

2. Angularjs implementiert einen einfachen Tab-Effekt

Html-Teil

<section ng-app="myApp">
       <div class="tabs tabs-style" ng-controller="TabController as tab">
         <nav>
           <ul>
             <li ng-class="{&#39;current&#39;:tab.isSet(1)}">
               <a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(2)}">
               <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(3)}">
               <a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(4)}">
               <a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li>
             <li ng-class="{&#39;current&#39;:tab.isSet(5)}">
               <a href="#" ng-click="tab.setCurrent(5)"><span>Contact</span></a></li>
           </ul>
         </nav>
         <div class="content">
           <section id="section-1"  ng-show="tab.isSet(1)">
             <p>1</p>
           </section>
           <section id="section-2"  ng-show="tab.isSet(2)">
             <p>2</p>
           </section>
           <section id="section-3" ng-show="tab.isSet(3)">
             <p>3</p>
           </section>
           <section id="section-4" ng-show="tab.isSet(4)">
             <p>4</p>
           </section>
           <section id="section-5" ng-show="tab.isSet(5)">
             <p>5</p>
           </section>
         </div>
       </div>
   </section>

CSS-Teil (hier können Kinder die CSS-Implementierung anpassen, damit wir weniger Syntax verwenden können Personalisierter Effekt)

* {  margin: 0;  padding: 0;
}body {  background: #e7ecea;  font-weight: 600;  font-family: 'Raleway', Arial, sans-serif;  text-align: center;
}a {    color: #2CC185;    text-decoration: none;    outline: none;
  
    &:hover {    color: #74777b;
    }
}.tabs {  position: relative;  width: 100%;  margin: 30px auto 0 auto;
  nav {
    ul {      position: relative;      display: flex;      max-width: 1200px;      margin: 0 auto;      list-style: none;      flex-flow: row wrap;      justify-content: center;
      
        li {          flex: 1;
          
          &.current a {            color: #74777b;
          }
        }
      }
    }  
    a {      display: block;      position: relative;      overflow : hidden;      line-height: 2.5;
      
      span {        vertical-align: middle;        font-size: 1.5em;
      }
    }
}.content {  position: relative; 
  
  section {    /* display: none; */
    margin: 0 auto;    max-width: 1200px;
    &.content-current {      /* display: block; */
    }    
    p {      color: rgba(40,44,42, 0.4);      margin: 0;      padding: 1.75em 0;      font-weight: 900;      font-size: 5em;      line-height: 1;
    }
  }
}.tabs-style {
  nav {    /* background: rgba(255,255,255,0.4); */
    
    ul li {
      a {        overflow: visible; 
        border-bottom: 1px solid rgba(0,0,0,0.2);        -webkit-transition: color 0.2s;        transition: color 0.2s;
      }
    }    
    ul li.current a{
      &:after, &:before {        content: '';        position: absolute;        top: 100%;        left: 50%;        width: 0;        height: 0;        border: solid transparent;
        }
      &:after {        margin-left: -10px;        border-width: 10px;        border-top-color: #e7ecea;
      }
      &:before {        margin-left: -11px;        border-width: 11px;        border-top-color: rgba(0,0,0,0.2);
      }
    }
  }
}

js-Teil

angular.module('myApp', [])
  .controller('TabController', function() {    this.current = 1;  
  this.setCurrent = function (tab) {    this.current = tab;
  };  
  this.isSet = function(tab) {    return this.current == tab;
  };
});

Der endgültige Effekt ist wie unten gezeigt:

Durch den obigen Code , wir Es kann festgestellt werden, dass der Kern der Implementierung die in AngularJS integrierten Anweisungen ng-class, ng-click und ng-show sind. Um es für Laien auszudrücken: Der Standardwert der aktuellen Daten ist 1 im Controller. ng-click passt die Funktion an, um die aktuellen Daten durch Abrufen des aktuellen Werts zu ändern Der Stil wird dem aktuell ausgewählten Index hinzugefügt, und der Container ruft auch die aktuellen Daten im Controller ab und zeigt sie über die ng-show-Steuerung an und verbirgt sie.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

So debuggen Sie verschiedene Versionen von NodeJS mit verschiedenen Versionen von vscdoe

Vuejs WebP unterstützt Plug-Ins in Entwicklung für Bilder

Das obige ist der detaillierte Inhalt vonWie implementiert man Tabs im MVVM-Stil in AngularJS? Fall + Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!