Angular 텍스트 접기 및 확장 효과의 간단한 구현-JS 튜토리얼-php.cn

Angular 텍스트 접기 및 확장 효과의 간단한 구현

小云云

풀어 주다： 2017-12-18 11:43:56

원래의

2771명이 탐색했습니다.

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에 표시할 수 있다는 것입니다. , 이렇게 할 수 있습니다< textfold> 이 구성요소를

나중에 링크를 사용하여 함수를 정의할 수도 있습니다

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

로그인 후 복사

이 두 문장은 실제로 매우 중요합니다. 텍스트의 높이를 얻을 때 텍스트의 변경 사항(텍스트가 완전히 렌더링된 후의 높이)을 캡처해야 하므로 범위를 사용합니다.$ designer.des의 변경 사항을 캡처합니다. 즉, 텍스트가 렌더링된 후

if (data) {
            textfold();
          }

로그인 후 복사

콜백 함수 textfold를 실행하여 현재 텍스트의 높이를 가져옵니다. 렌더링 후 텍스트 높이를 가져오기 위해 일시적으로 이 방법을 시도했습니다.

콜백 대신 순차적으로 실행하면

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

로그인 후 복사

은 범위 태그의 기본 높이만 가져옵니다

약간의 트릭을 추가할 수도 있습니다. 여기에scope.more();

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

로그인 후 복사

이렇게 하면 페이지로 만들 수 있습니다. 렌더링 후 먼저 확장한 다음 축소한 다음 페이지에 들어가면 기본적으로 축소된 상태가 됩니다. 프로그램에서는 이 효과를 작성할 때 일반적으로 텍스트를 확장하여 높이를 얻은 다음 접힌 상태로 돌아가도록 합니다. 들어오는 페이지의 접힌 텍스트 상태

var isExtend = true; 다음 범위를 사용하여 첫 번째 분기 접기 상태를 입력하세요.

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

로그인 후 복사

이 문장은 재귀 문장으로, 실제로 jQuery의 애니메이트의 텍스트 상자 확장 애니메이션 구현과 동일합니다. 단, 여기에서 재귀를 사용하여 지속적으로 판단한다는 점이 다릅니다. status를 변경하고 높이 값을 변경하세요

그리고 나서scope.isMore를 변경하여 더 자세히 보거나...또는 축소하세요

여기가 DOM 작업 사용

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

로그인 후 복사

한 문장을 더 추가하는 것이 가장 좋습니다.

scope.$apply();

로그인 후 복사

DOM 변경을 가져오기

사실 일반적인 아이디어는 매우 간단하고, 다른 곳도 이해하기 쉽기 때문에 여러분도 직접 시도해 볼 수 있습니다.