首頁 > 文章 > web前端 > 簡單實作Angular文字折疊展開效果

簡單實作Angular文字折疊展開效果

小云云原創: 2017-12-18 11:43:562758瀏覽

Angular文字折疊展開效果也是一種很有趣的功能，本文主要介紹了Angular文字折疊展開組件的原理分析，小編覺得挺不錯的，現在分享給大家，也給大家做個參考，希望能幫助大家。

自己寫了個Angular的文字折疊元件，這種元件其實很多地方都能用到效果如下

展開後的效果

折疊後的效果

#先放全部程式碼，使用的時候只需要把自己需要展現的文字{{designer.des}}替換成自己所在路由器所需要綁定的資料即可

.directive(&#39;textfold&#39;, function() {
    return {
      restrict: &#39;EA&#39;,
      template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,
      link: function(scope, element, attrs) {
        var height;
        var maxheight;
        function textfold() {
          height = angular.element(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
          }
        })
        var isExtend = true;
        scope.isMore = "折叠";
        scope.more = function() {
          var minheight = 23;
          if (isExtend) {
            if (height >= minheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height -= 10;
            } else {
              scope.isMore = "查看更多...";
              scope.$apply();
              isExtend = !isExtend;
              height += 10;
            }
          } else {
            if (height <= maxheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height += 10;
            } else {
              scope.isMore = "折叠";
              scope.$apply();
              isExtend = !isExtend;
              height -= 10;
            }
          }
        }
      }
    }
  })

下面我一句話的分析這個元件的想法

首先肯定是定義好Angular該元件化的模板和使用模式

restrict: &#39;EA&#39;,
template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,

EA為，使用元素和屬性的方法都可以在DOM裡面展現這個插件，既我可以這樣a0bcc65b642cef835222289e0b59a11672d6f4e402c93e7ffaeb80c6e7902589也可以這樣a607a8b0896de90debb5682d9fb58fe494b3e26ee717c64999d7867364b1b4a3的形式來復用該組件的形式來復用該組件的形式來復用該組件的形式來復用該組件後面我們使用link定義一個函數

var height;
var maxheight;

這兩個變數一個是此時折疊完後的高度（這個是在展開變成摺疊的過程中不斷改變的，最後摺疊後就是等於minheight），一個文字完全展開時候獲取的高度

function textfold() {
          height = angular.element(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
            scope.more();
          }
        })

這兩句其實很重要的，當我們取得文字的高度時候，是必須要捕捉文字的變化（文字完全渲染後的高度），所以我們用scope.$watch來捕捉designer.des的變化，當data不為空，即文字已渲染後

if (data) {
            textfold();
          }

再去執行回呼函數textfold來取得目前文字的高度，暫時試過此方法可以取得文字渲染後的高度

如果順序執行而不是回呼執行

angular.element(&#39;#textfold&#39;).height()

#只會拿到span標籤的預設高度而已

這裡還可以加入個小技巧，增加一句scope.more();

if (data) {
            textfold();
            scope.more();
          }

這樣就可以讓它頁面渲染完後先展開，然後再折疊，那麼我們就在進來頁面的時候默認是折疊的狀態了，在程式裡面，寫這種效果，一般是先讓它文字展開獲取到高度再返回成折疊狀態，來達到進來頁面就是折疊的文字狀態效果

var isExtend = true;這句話是讓下面的scope.more進入第一個分支折疊狀態

setTimeout(function() {
                scope.more();
              }, 1);

##這句是一句遞歸，其實就相當於實現jQuery的animate的文字框伸縮動畫，只是這裡用了一個遞歸來實現不斷進來判斷狀態從而改變height值

然後透過改變scope.isMore改變它是查看更多…還是折疊

#由於這裡是用DOM操作

document.getElementById(&#39;textfold&#39;).style.height = height + "px";

##下面這裡最好加多一句

scope.$apply();

來取得DOM的變化

其實大概思路就是很簡單的，其他一些地方也是很容易理解，大家可以動手嘗試。

簡單實作Angular文字折疊展開效果

相關文章