Angularjs實現mvvm式的選項卡示例代碼

更新時間：2016年09月08日 10:04:19 投稿：daisy

每位Web開發(fā)者應該都知道，選項卡是現代web網頁中最常用的效果之一，所以本文重點是用angularjs這個非常火mvvm框架，實現選項卡效果。有需要的朋友們可以參考借鑒，下面來一起看看吧。

在實現Angularjs實現mvvm式的選項卡之前，先搬出我們常用的jquery實現。

1、jquery實現簡單粗暴的選項卡效果

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();
});

在這里只給出js核心部分，html和css不做贅述。

以上代碼，簡單粗暴的實現了選項卡效果，用點擊事件獲得elem.index() , 把索引和容器串起來控制顯示隱藏。

2、angularjs實現一個簡單選項卡效果

Html部分

 <section ng-app="myApp">
  <div class="tabs tabs-style" ng-controller="TabController as tab">
   <nav>
   <ul>
    <li ng-class="{'current':tab.isSet(1)}">
    <a href="#" ng-click="tab.setCurrent(1)"><span>Home</span></a></li>
    <li ng-class="{'current':tab.isSet(2)}">
    <a href="#" ng-click="tab.setCurrent(2)"><span>Work</span></a></li>
    <li ng-class="{'current':tab.isSet(3)}">
    <a href="#" ng-click="tab.setCurrent(3)"><span>Blog</span></a></li>
    <li ng-class="{'current':tab.isSet(4)}">
    <a href="#" ng-click="tab.setCurrent(4)"><span>About</span></a></li>
    <li ng-class="{'current':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 部分（這里為了方便我們使用Less語法，童鞋們可以自定義css實現個性效果）

* {
 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部分

angular.module('myApp', [])
 .controller('TabController', function() {
 this.current = 1;

 this.setCurrent = function (tab) {
 this.current = tab;
 };

 this.isSet = function(tab) {
 return this.current == tab;
 };
});

最后效果如下圖所示：

通過以上代碼，我們可以發(fā)現實現的核心是angularjs內置的ng-class和ng-click，ng-show指令。

通俗來講：controller里定義了current 這條數據默認值為1，ng-click給點擊事件自定義函數，改變current數據，ng-class通過獲得current的值綁定條件，給當前選中的索引添加current樣式，容器同樣獲得controller里的current數據通過ng-show控制顯示隱藏。

3、angularjs實現一個稍微復雜的移動端選項卡效果

html部分

<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-touch.min.js"></script>
//angularjs的一個移動端touch事件庫

<div ng-app='myApp' ng-controller="myController">
 <div class="type-tabs">
  <div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div>
 </div>
 <div class="guid-bar">
  <div class="guid-bar-content" style="left:{{ 25*activeIndex}}%"></div>
 </div>
 <div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()">
  <div class="tab-content-inner" style="left:{{ -100*activeIndex}}%">
  <div class="tab-content-item" ng-repeat="item in [1,2,3,4]" >
   <br /><br /><br /><br />
   <h1>Tab{{item}}
   </h1></div>
  </div>
 </div>
</div>

css部分

*{
 padding:0;
 margin:0;
 font-family:'Arial';
}
.type-tabs{
 width: 100%;
 height: 40px;
}
.type-tabs div{
 float: left;
 width: 25%;
 line-height: 40px;
 text-align: center;
 cursor:pointer;
 user-select:none; 
 -webkit-user-select:none;

}
.guid-bar{
 position: relative;
 margin-top: -3px;
}
.guid-bar-content{
 width: 25%;
 height: 3px;
 background-color: #345;
 position: absolute;
 left: 50%;
 transition:all 400ms ease;
}
.tab-content{
 width: 100%;
 height: 500px;
 background-color: #ccc;
 overflow: hidden;
}
.tab-content-inner{
 width: 400%;
 position: relative;
 transition: all 400ms;
}
.tab-content-item{
 width: 25%;
 float: left;
 text-align:center;
}

js部分

var myApp=angular.module('myApp',['ngTouch']);
myApp.controller('myController',function($scope){
 $scope.activeIndex=0;
 $scope.changeIndex=function(index){
  $scope.activeIndex=index;
 };
 $scope.swipeLeft=function(){
  $scope.activeIndex=++$scope.activeIndex;
  $scope.check();
 };
 $scope.swipeRight=function(){
  $scope.activeIndex=--$scope.activeIndex;
  $scope.check();
 };
 $scope.check=function(){
  if($scope.activeIndex>3)
  $scope.activeIndex=0;
  if($scope.activeIndex<0)
  $scope.activeIndex=3;
 }
})

效果如下：

好了，今天我們就給出這兩個例子，對angularjs了解過的童鞋，直接看代碼應該可以很快看懂。沒了解過的童鞋，也能通過這兩個例子，了解到mvvm的黑魔法，以及它的代碼組織結構。

4、angularjs的mvvm模式比jquery的dom操作好在哪里？

1、從宏觀上來說，一種是操作數據處理數據，一種是操作dom和ui交互。

一般網頁項目的流程可以總結為三個流程：1）你要獲取界面上的數據 2）后臺交換數據3）獲取數據后，對界面重新進行渲染。這個過程中，你和后臺數據交換怎么實現？jquery的ajax吧，如果數據交換的API假設20多個，那么$.get或者$.ajax你要寫多少個才能全部包含進去？而且所有API鏈接都不在一個地方，管理起來相當麻煩。而angularjs只要配置一下route就行了。
獲取了數據后，你又如何管理這些數據，如何把數據渲染到界面上去？

如何管理各種事件?jquery本身特性，也就是事件觸發(fā)，很多時候，就是你在編寫觸發(fā)事件->處理數據的流程。很顯然，功能一多，代碼就會和面條一樣，交織在一起了。身邊不乏兩三年的傳統jquery前端，事件委托、dom操作、瀏覽器渲染過程、插件組件封裝等等都沒有去深入研究，可想而知代碼質量有多爛。事實上jquery是一個類庫，并不是一個開發(fā)框架，jq是對js原生api的進一步封裝，讓你更加愉快的進行dom操作、動畫操作以及ajax，正是因為他太過靈活，所以更容易寫出難以維護的代碼。

2、性能方面：DOM操作慢，DOM對象本身也是一個js對象，所以嚴格來說，并不是操作這個對象慢，而是說操作了這個對象后，會觸發(fā)一些瀏覽器行為，比如布局（layout）和繪制（paint）。

總結

隨著web產品越來越復雜，分層架構是必不可少的，因此雙向綁定作為解藥，結合很早就流行的MVC框架，衍生出MVVM這神器。博主堅信，mvvm會是前端的終極解決方案。由DOM操作到數據操作需要一個過程去適應，但只要結果是好的，這些付出就都值得。在這個過程中，也是對你專業(yè)能力的一種提升。加油小伙伴們！?。?br />

您可能感興趣的文章:

angular ng-model 無法獲取值的處理方法
今天小編就為大家分享一篇angular ng-model 無法獲取值的處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
深入淺析Angular SSR
Angular Universal 主要關注將 Angular App 如何進行服務端渲染和生成靜態(tài) HTML，對于用戶交互復雜的 SPA 并不推薦使用 SSR，本文是在 Angular 14 環(huán)境中完成，有些內容對于新的 Angular 版本可能并不適用，感興趣的朋友一起通過本文學習
2022-11-11
AngularJS 實現JavaScript 動畫效果詳解
本文主要介紹AngularJS 實現 JavaScript 動畫的資料，這里整理了詳細的資料和簡單示例代碼，有興趣的小伙伴可以參考下
2016-09-09
AngularJS框架的ng-app指令與自動加載實現方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實現方法,結合實例形式分析了ng-app指令的功能及自動加載機制的實現技巧,需要的朋友可以參考下
2017-01-01
AngularJS 遇到的小坑與技巧小結
本文主要對AngularJS 遇到的小坑與技巧進行了一個小小的總結，比較使用，希望能給大家做一個參考。
2016-06-06
Angular.js前臺傳list數組由后臺spring MVC接收數組示例代碼
這篇文章主要給大家介紹了關于Angular.js前臺傳list數組之后，由后臺spring MVC接收數組的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起學習學習吧。
2017-07-07
Angular4.0中引入laydate.js日期插件的方法教程
在AngularJs中我們會不可避免的使用第三方庫，例如jquery插件庫。下面這篇文章主要給大家介紹了關于Angular4.0中引入laydate.js日期插件的相關資料，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
2017-12-12
angularjs請求數據的方法示例
這篇文章主要給大家介紹了關于angularjs請求數據的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用angularjs具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-08-08
AngularJS 中的事件詳解
本文主要介紹AngularJS 事件,這里整理了相關資料,比較詳細的介紹了AngularJS的使用方法,有需要的小伙伴參考下
2016-07-07
AngularJS入門教程之Hello World!
這篇文章主要介紹了AngularJS入門教程之Hello World!,本文用經典的應用程序“Hello World!”來講解AngularJS,要的朋友可以參考下
2014-12-12