> 웹 프론트엔드 > H5 튜토리얼 > element-ui가 테이블 스크롤 효과를 작동하는 방법

element-ui가 테이블 스크롤 효과를 작동하는 방법

php中世界最好的语言
풀어 주다: 2018-03-27 17:37:18
원래의
4561명이 탐색했습니다.

이번에는 element-ui가 테이블 스크롤 효과를 어떻게 작동하는지 보여드리겠습니다. Element-ui가 테이블 스크롤을 작동할 때 주의사항은 무엇인가요?

스크롤 이벤트를 수신하기 위한 전역 등록 event 추가

window.Vue.directive('loadmore', {
 bind(el, binding) {
 const selectWrap = el.querySelector('.el-tablebody-wrapper')
 selectWrap.addEventListener('scroll', function() {
  let sign = 100
  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
  if (scrollDistance <= sign) {
  binding.value()
  }
 })
 }
})
로그인 후 복사

표시는 위치를 표시하는 데 사용됩니다.

직접 scrollDistance === 표시를 허용한다고 해서 매번 트리거된다는 보장은 없으므로 표시됩니다. 간격으로. 빈번한 트리거 문제는 나중에 다루겠습니다.

이벤트 추가

무선으로 로드해야 하는 forms에 사용자 정의 이벤트를 추가합니다(v-loadmore="loadMore"). 메소드에서 트리거된 이벤트를 정의하세요

 loadMore () {
 if (this.loadSign) {
  this.loadSign = false
  this.page++
  if (this.page > 10) {
  return
  }
  setTimeout(() => {
  this.loadSign = true
  }, 1000)
  console.log('到底了', this.page)
 }
 }
로그인 후 복사

this.loadSign은 페이지가 계속 증가하는지 여부를 표시하는 데 사용됩니다

이 기사의 사례를 읽은 후 메소드를 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주목하세요. PHP 중국어 웹사이트의 기사!

추천 도서:

Vue에서 Compass 사용하기

UEditor 리치 텍스트 편집기 통합 방법

위 내용은 element-ui가 테이블 스크롤 효과를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿