찾다

집  >  기사  >  웹 프론트엔드  >  vue.js의 2.x에 대한 가상 스크롤 막대

vue.js의 2.x에 대한 가상 스크롤 막대

亚连
亚连원래의
2018-06-09 17:25:551539검색

이 글에서는 주로 vue.js 2.x 기반의 가상 스크롤바 샘플 코드를 소개하고 있으니 참고용으로 올려드리겠습니다.

머리말

전에 우연히 오픈소스 cms 프로젝트를 탐색하다가 프로젝트 왼쪽 메뉴가 창 너비를 초과하는 것을 발견한 기억이 납니다. 왜 스크롤바가 없는지 궁금합니다. 그런 다음 자세히 살펴보았고 왼쪽에 작은 p가 있는 것을 발견했습니다. 그런 다음 드래그하여 기본 스크롤 막대와 동일한 것을 발견했습니다. 소스 코드를 살펴보면서 이 스크롤 막대가 slimScroll이라는 것을 알게 되었고, github 저장소에 가서 살펴보니 동일한 스크롤 막대를 만들 수도 있겠다는 생각이 들었습니다. vue를 통해 달성했습니다!

Design

좋아, 이제 스크롤 막대 디자인 단계를 시작해 보겠습니다.

스크롤 막대 돔 디자인

가장 먼저 고려해야 할 사항은 다음과 같습니다. 스크롤해야 하는 콘텐츠를 만들고 싶다면 스크롤, 첫 번째는 부모 DOM이 고정된 길이와 너비를 가져야 한다는 것입니다. 즉, 초과 부분을 숨겨야 합니다. 즉, 스타일이 추가됩니다. Overflow: Hidden 따라서 콘텐츠에 래퍼를 추가합니다. 길이와 너비가 상위 DOM과 같도록 스크롤하면 다음과 같은 스타일이 있습니다. 오버플로: 숨김, 래핑된 요소는 scrollPanel

두 번째: 우리는 다음과 같이 강력해야 한다는 것을 알고 있습니다. 네이티브 스크롤바! 가로 스크롤 막대와 세로 스크롤 막대를 디자인해야 합니다. 스크롤 막대와 스크롤 패널은 형제 노드 간의 관계에 속하므로 스크롤 막대가 있으면 원래 스타일 레이아웃에 오류가 발생하지 않으며 위치를 제어할 수 있도록 위쪽과 왼쪽을 지원합니다. , 따라서 스크롤 막대의 위치는 절대적이어야 합니다. 가로 스크롤 막대를 hBar, 세로 스크롤 막대를 vBar

라고 부르겠습니다. 마지막으로, 우리는 scrollPanel, vBar, hBar를 설계했습니다. 이를 래핑하려면 상위 p가 필요합니다. 그런 다음 스타일: position:relative

Practice

Design 컴포넌트 구조

우선, 우리 플러그인에는 총 4개의 컴포넌트가 있는데, 그 중 3개는 하위 컴포넌트이고 1개는 상위 컴포넌트입니다. 즉, vueScroll(상위 구성 요소), scrollPanel(스크롤해야 하는 콘텐츠를 래핑하는 하위 구성 요소), vBar(세로 스크롤 막대), hBar(가로 스크롤 막대)

두 번째로 각 구성 요소가 담당하는 기능을 설계해 보겠습니다. 여기의 구성 요소는 제어 계층 구성 요소와 디스플레이 구성 요소로 구분됩니다(react에 익숙한 학생은 이것을 알아야 합니다). 디스플레이 계층 구성 요소는 vBar, hBar, scrollPanel과 같은 디스플레이 기능만 완료합니다. 너비, 높이, 색상, 투명도, 위치 등과 같은 다양한 상태. 제어 계층 구성 요소는 vueScroll입니다.

특정 구현

hBar/vBar

hBar/vBar 이 두 가지는 각각 가로 스크롤 바와 세로 스크롤 막대로 구현하는 기능이 거의 동일하므로 여기서는 vBar로 함께 언급합니다. 예.

props는 상위 구성 요소가 전달한 속성, 특히 마우스가 움직일 때 주로 스크롤 막대를 표시하는 

{
  height: vm.state.height + 'px', //滚动条的高度
  width: vm.ops.width, // 滚动条的宽度
  position: 'absolute', 
  background: vm.ops.background, // 滚动条背景色
  top: vm.state.top + 'px', // 滚动条的高度
  transition: 'opacity .5s', // 消失/显示 所用的时间
  cursor: 'pointer', //
  opacity: vm.state.opacity, // 透明度
  userSelect: 'none' 
 }

2 이벤트를 받습니다. 

...
render(_c){
  return _c(
    // ...
    {
      mouseenter: function(e) {
        vm.$emit('showVBar'); // 触发父组件事件，显示滚动条
      }
    }
    // ...
  )
}

그 중 state는 런타임에 변경될 수 있는 상태를 나타내고, ops는 사용자가 전달하는 구성 매개변수입니다.

scrollPanel

은 스크롤 콘텐츠를 래핑하는 구성 요소입니다. 스타일은 Overflow: Hidden 으로 설정되어야 합니다.

1. 스타일 

var style = vm.scrollContentStyle;
 style.overflow = 'hidden';
 // ...
 {
   style: style
 }
 // ...

2. 이벤트 

// ...
  render(_c) {
    // ...
      on: {
        mouseenter: function() {
          vm.$emit('showBar');
        },
        mouseleave: function() {
          vm.$emit('hideBar');
        }
      }
    // ...
  }
 // ...

vuescroll

컨트롤 구성요소. 하위 구성요소별로 표시되는 상태를 제어하고, 다양한 청취 이벤트를 추가하는 등의 작업을 수행합니다.

1. dom의 실시간 정보를 얻기 위해 하위 구성 요소의 dom 요소를 얻습니다. 

// ...
   initEl() {
    this.scrollPanel.el = this.$refs['vueScrollPanel'] && this.$refs['vueScrollPanel'].$el;
    this.vScrollBar.el = this.$refs['vScrollBar'] && this.$refs['vScrollBar'].$el;
    this.hScrollBar.el = this.$refs['hScrollBar'] && this.$refs['hScrollBar'].$el;
  }
  // ...

2. 스크롤 막대 표시

가로 스크롤 막대 표시 및 세로 스크롤 막대 표시를 포함하여 세로 스크롤 막대 표시의 예는 다음과 같습니다. 

// ...
    var temp;
    var deltaY = {
      deltaY: this.vScrollBar.ops.deltaY // 获取用户配置的deltaY
    };
    if(!this.isMouseLeavePanel || this.vScrollBar.ops.keepShow){
      if ((this.vScrollBar.state.height = temp = this.getVBarHeight(deltaY))) { // 判断条件
        // 重新设置滚动条的状态
        this.vScrollBar.state.top = this.resizeVBarTop(temp);
        this.vScrollBar.state.height = temp.height;
        this.vScrollBar.state.opacity = this.vScrollBar.ops.opacity;
      }
    }
  // ...

3. 스크롤 바

돔 요소 때문에 높이가 고정되어 있지 않기 때문에 돔의 실제 높이를 실시간으로 얻어야 ​​합니다. 스크롤 바 높이 계산 공식은 다음과 같습니다. 

var height = Math.max(
      scrollPanelHeight / 
      (scrollPanelScrollHeight / scrollPanelHeight), 
      this.vScrollBar.minBarHeight
      );

즉, 스크롤 막대의 높이: scrollPanel의 높이 == scrollPanel의 높이: dom 요소의 높이

4. resizeVBarTop, 오류를 방지하기 위해 상위 항목에서 스크롤 막대의 높이를 찾을 수 있습니다. 요소. 

resizeVBarTop({height, scrollPanelHeight, scrollPanelScrollHeight, deltaY}) {
  // cacl the last height first
  var lastHeight = scrollPanelScrollHeight - scrollPanelHeight - this.scrollPanel.el.scrollTop;
  if(lastHeight < this.accuracy) {
    lastHeight = 0;
  }
  var time = Math.abs(Math.ceil(lastHeight / deltaY));
  var top = scrollPanelHeight - (height + (time * this.vScrollBar.innerDeltaY));
  return top;
}

5. 휠 스크롤 이벤트를 모니터링합니다. 

// ...
  on: {
    wheel: vm.wheel
  }
  // ...
   wheel(e) {
    var vm = this;
    vm.showVBar();
    vm.scrollVBar(e.deltaY > 0 ? 1 : -1, 1);
    e.stopPropagation();
  }
  // ...

6. 스크롤바 드래그 이벤트 모니터링

listenVBarDrag: function() {
    var vm = this;
    var y;
    var _y;
    function move(e) {
      _y = e.pageY;
      var _delta = _y - y;
      vm.scrollVBar(_delta > 0 ? 1 : -1, Math.abs(_delta / vm.vScrollBar.innerDeltaY));
      y = _y;
    }
    function t(e) {
      var deltaY = {
        deltaY: vm.vScrollBar.ops.deltaY
      };
      if(!vm.getVBarHeight(deltaY)) {
        return;
      }
      vm.mousedown = true;
      y = e.pageY; // 记录初始的Y的位置
      vm.showVBar();
      document.addEventListener(&#39;mousemove&#39;, move);
      document.addEventListener(&#39;mouseup&#39;, function(e) {
        vm.mousedown = false;
        vm.hideVBar();
        document.removeEventListener(&#39;mousemove&#39;, move);
      });
    }
    this.listeners.push({
      dom: vm.vScrollBar.el,
      event: t,
      type: "mousedown"
    });
    vm.vScrollBar.el.addEventListener(&#39;mousedown&#39;, t); // 把事件放到数组里面，等销毁之前移除掉注册的时间。
  }

7. 모바일 단말기에 적응하고 터치 이벤트를 듣습니다. 현재 방향이 x인지 y인지를 결정하는 추가 판단이 있다는 점을 제외하면 드래그 이벤트의 원리와 유사합니다. 

listenPanelTouch: function() {
    var vm = this;
    var pannel = this.scrollPanel.el;
    var x, y;
    var _x, _y;
    function move(e) {
      if(e.touches.length) {
        var touch = e.touches[0];
        _x = touch.pageX;
        _y = touch.pageY;
        var _delta = void 0;
        var _deltaX = _x - x;
        var _deltaY = _y - y;
        if(Math.abs(_deltaX) > Math.abs(_deltaY)) {
          _delta = _deltaX;
          vm.scrollHBar(_delta > 0 ? -1 : 1, Math.abs(_delta / vm.hScrollBar.innerDeltaX));
        } else if(Math.abs(_deltaX) < Math.abs(_deltaY)){
          _delta = _deltaY;
          vm.scrollVBar(_delta > 0 ? -1 : 1, Math.abs(_delta / vm.vScrollBar.innerDeltaY));
        }
        x = _x;
        y = _y;
      }
    }
    function t(e) {
      var deltaY = {
        deltaY: vm.vScrollBar.ops.deltaY
      };
      var deltaX = {
        deltaX: vm.hScrollBar.ops.deltaX
      };
      if(!vm.getHBarWidth(deltaX) && !vm.getVBarHeight(deltaY)) {
        return;
      }
      if(e.touches.length) {
        e.stopPropagation();
        var touch = e.touches[0];
        vm.mousedown = true;
        x = touch.pageX;
        y = touch.pageY;
        vm.showBar();
        pannel.addEventListener(&#39;touchmove&#39;, move);
        pannel.addEventListener(&#39;touchend&#39;, function(e) {
          vm.mousedown = false;
          vm.hideBar();
          pannel.removeEventListener(&#39;touchmove&#39;, move);
        });
      }
    }
    pannel.addEventListener(&#39;touchstart&#39;, t);
    this.listeners.push({
      dom: pannel,
      event: t,
      type: "touchstart"
    });
  }

8. 콘텐츠 스크롤

콘텐츠 스크롤의 원리는 콘텐츠가 위, 아래, 왼쪽, 오른쪽으로 이동하도록 제어하기 위해 scrollPanel의 scrollTop/scrollLeft를 변경하는 것 이상입니다. 

scrollVBar: function(pos, time) {
    // >0 scroll to down <0 scroll to up
     
    var top = this.vScrollBar.state.top; 
    var scrollPanelHeight = getComputed(this.scrollPanel.el, &#39;height&#39;).replace(&#39;px&#39;, "");
    var scrollPanelScrollHeight = this.scrollPanel.el.scrollHeight;
    var scrollPanelScrollTop = this.scrollPanel.el.scrollTop;
    var height = this.vScrollBar.state.height;
    var innerdeltaY = this.vScrollBar.innerDeltaY;
    var deltaY = this.vScrollBar.ops.deltaY;
    if (!((pos < 0 && top <= 0) || (scrollPanelHeight <= top + height && pos > 0) || (Math.abs(scrollPanelScrollHeight - scrollPanelHeight) < this.accuracy))) {
      var Top = top + pos * innerdeltaY * time;
      var ScrollTop = scrollPanelScrollTop + pos * deltaY * time;
      if (pos < 0) {
        // scroll ip
        this.vScrollBar.state.top = Math.max(0, Top);
        this.scrollPanel.el.scrollTop = Math.max(0, ScrollTop);
      } else if (pos > 0) {
        // scroll down
        this.vScrollBar.state.top = Math.min(scrollPanelHeight - height, Top);
        this.scrollPanel.el.scrollTop = Math.min(scrollPanelScrollHeight - scrollPanelHeight, ScrollTop);
      }
    }
    // 这些是传递给父组件的监听滚动的函数的。
    var content = {};
    var bar = {};
    var process = "";
    content.residual = (scrollPanelScrollHeight - scrollPanelScrollTop - scrollPanelHeight);
    content.scrolled = scrollPanelScrollTop;
    bar.scrolled = this.vScrollBar.state.top;
    bar.residual = (scrollPanelHeight - this.vScrollBar.state.top - this.vScrollBar.state.height);
    bar.height = this.vScrollBar.state.height;
    process = bar.scrolled/(scrollPanelHeight - bar.height);
    bar.name = "vBar";
    content.name = "content";
    this.$emit(&#39;vscroll&#39;, bar, content, process);
  },

9. 등록된 이벤트를 삭제합니다.

지금 우리는 등록된 이벤트를 리스너 배열에 넣었고 beforedestroy 후크에서 이벤트를 삭제할 수 있습니다. 

// remove the registryed event.
  this.listeners.forEach(function(item) {
    item.dom.removeEventListener(item.event, item.type);
  });

실행 스크린샷

PC측 실행 스크린샷은 아래와 같습니다.

청취 이벤트 등록 후 실행되는 스크린샷은 아래와 같습니다.

휴대폰에서 실행되는 스크린샷은

성능 효과가 기본 스크롤 막대와 일치하는 것을 볼 수 있습니다.

결론 및 반성

위 내용은 기본적으로 제가 디자인한 스크롤바 디자인입니다. 우선 이런 공유 플랫폼을 주신 너겟에 감사드리고, 다음에는 작성자님께도 감사의 말씀을 전하고 싶습니다. 나에게 그런 아이디어를 준 slimScroll. 이 플러그인을 완성한 후에는 DOM 요소의 scrollWidth, scrollHeigh, scrollTop 및 scrollLeft에 대해 더 많이 알게 되었습니다. 위의 내용이 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue 라우팅에서 매개변수를 전달하는 3가지 기본 모드(자세한 튜토리얼)

JavaScript의 관련 트릭

webpack에서 동적으로 파일 가져오기 구현

위 내용은 vue.js의 2.x에 대한 가상 스크롤 막대의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript vue.js webpack JS 事件 dom position overflow github windows cms
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：classList가 두 개의 버튼 스타일 전환을 구현하는 방법다음 기사：classList가 두 개의 버튼 스타일 전환을 구현하는 방법

관련 기사

더보기