vue 모 바 일 UI 프레임 워 크 슬라이딩 으로 데 이 터 를 불 러 오 는 방법

머리말
우리 이동 단 에 자주 사용 되 는 구성 요소 가 하나 더 있 습 니 다.그것 은 슬라이딩 으로 더 많은 구성 요 소 를 불 러 오 는 것 입 니 다.평소에 우리 가 본 많은 플러그 인 들 이 상당히 복잡 하 게 이 구성 요 소 를 실현 하 는 것 이 매우 어렵다 고 생각 합 니 다.사실은 그렇지 않 습 니 다!!이 구성 요 소 는 사실 아주 간단하게 실현 할 수 있 고 체험 도 아주 좋 습 니 다(물론 우 리 는 드 롭 다운 리 셋 기능 을 실현 하지 못 했 습 니 다)!다음은 우리 함께 이 구성 요 소 를 실현 합 시다.
효과 전시
먼저 이전 gif 그림 에서 우리 가 만 든 효 과 를 보 여 줍 니 다.다음 과 같 습 니 다.

DOM 구조
페이지 에는 세 가지 부분 이 포함 되 어 있어 야 합 니 다.1.본문 구역 2.작은 국화 불 러 오기 및 기록 문자 3.모든 데이터 불 러 오기 완료 후 텍스트:

<div ref="scroll" class="r-scroll">
 <div class="r-scroll-wrap">
  <slot></slot>
 </div>
 <slot name="loading">
  <div v-show="isLoading" class="r-scroll-loading">
   <r-loading></r-loading>
   <span class="r-scroll-loading-text">{{loadingText}}</span>
  </div>
 </slot>
 <slot name="complate">
  <div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div>
 </slot>
</div>
css 스타일
전체 구성 요소 의 용기 r-scroll 은 고정 너비 이 고 부분 을 초과 하면 굴 릴 수 있 습 니 다.본문 구역 은 내용 에 따라 고도 로 자동 으로 증가 해 야 한다.작은 국 화 를 불 러 올 때 스크롤 거리의 기본 값 을 표시 합 니 다.모든 데이터 로드 완료 후 데이터 로드 완료 텍스트 보이 기:

<style lang="scss">
@mixin one-screen {
 position: absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 overflow: hidden;
}
@mixin overflow-scroll {
 overflow: scroll;
 -webkit-overflow-scrolling: touch;
}

.r-scroll{
 @include one-screen;
 @include overflow-scroll;
 &-loading{
  text-align: center;
  padding-top: 3vw;
  padding-bottom: 3vw;
  font-size: 14px;
  color: #656565;
  line-height: 20px;
  &-text{
   display: inline-block;
   vertical-align: middle;
  }
 }
}
</style>

javascript
대화 식 논리 분석:
  • 페이지 가 초기 화 될 때 전체 구성 요소 노드 와 본문 용기 노드 를 가 져 옵 니 다
  • 전체 용기 노드 를 연결 scroll 이벤트
  • 용기 가 굴 러 가 는 과정 에서 상단 이 지정 한 수치 보다 작 는 지 판단 하고 작 으 면 사용자 정의 이벤트 loadmore 를 촉발 합 니 다
  • 업무 코드 에서 loadmore 사건 을 감청 하고 트리거 하면 데 이 터 를 불 러 옵 니 다
  • 코드 가 복잡 하지 않 기 때문에 상세 하 게 해석 하지 않 습 니 다.코드 설명 을 보 세 요.모 르 는 것 이 있 으 면 댓 글 에 댓 글 을 달 아 주세요.
    
    <script>
    import rLoading from '../loading'
    export default{
     components: {rLoading},
     props: {
      //       ,               loadmore
      bottomDistance: {
       type: [Number, String],
       default: 70
      },
      //       
      loadingText: {
       type: String,
       default: '   ...'
      },
      //          
      complateText: {
       type: String,
       default: '--           --'
      }
     },
     data () {
      return {
       //             
       isComplate: false,
       //             
       isLoading: false,
       //     
       scroll: null,
       //     
       scrollWrap: null
      }
     },
     watch: {
      //   isLoading,  isLoading   true      loadmore  
      isLoading (val) {
       if (val) {
        this.$emit('loadmore')
       }
      }
     },
     methods: {
      //      ,      、      ,              
      init () {
       this.scroll = this.$refs.scroll
       this.scrollWrap = this.scroll.childNodes[0]
       this.scroll.addEventListener('scroll', this.scrollEvent)
       this.$emit('init', this.scroll)
      },
      scrollEvent (e) {
       //            ,      loadmore  
       if (this.isComplate) return
       let scrollTop = this.scroll.scrollTop
       let scrollH = this.scroll.offsetHeight
       let scrollWrapH = this.scrollWrap.offsetHeight
       //          +                      -         loadmore  
       if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
        this.isLoading = true
       }
      },
      //               
      loaded () {
       this.isLoading = false
      },
      //               
      compleate () {
       this.isLoading = false
       this.isComplate = true
       this.scroll.removeEventListener('scroll', this.scrollEvent)
      }
     },
     mounted () {
      this.$nextTick(this.init)
     }
    }
    </script>
    
    또한 이 구성 요 소 는 loading 작은 국화 구성 요 소 를 참조 하여 작은 국화 구성 요소 코드 를 부록 합 니 다.코드 가 간단 하기 때문에 상세 하 게 해석 하지 않 습 니 다.
    국 화 는 gif 그림 을 사용 합 니 다.좋아 하 는 국화 gif 를 찍 어서 이 국화 구성 요소 의 경로 에 놓 으 십시오.
    
    <template>
     <div class="r-loading-container">
      <img src="./loading.gif">
     </div>
    </template>
    <script>
    export default {}
    </script>
    <style lang="scss">
    .r-loading-container{
     display: inline-block;
     vertical-align: middle;
     img{
      width: 20px;
      height: 20px;
      display: block;
     }
    }
    </style>
    
    마지막 에 쓰다
    마지막 으로 여기에 사용 예 를 하나 첨부 합 시다.
    
    <template>
     <div class="index">
      <r-scroll ref="scroll" @loadmore="queryDate">
       <div class="item" v-for="(item, index) in list">{{item}}</div>
      </r-scroll>
     </div>
    </template>
    
    <script>
    import rScroll from '../../components/scroll'
    function timeout (ms) {
     return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, 'done')
     })
    }
    
    export default{
     components: {rScroll},
     data () {
      return {
       i: 0,
       list: []
      }
     },
     methods: {
      async queryDate () {
       await timeout(1000)
       let i = this.i
       let data = []
       for (let j = 0; j < 40; j++) {
        data.push(i + j)
        this.i = this.i + 1
       }
       this.list = this.list.concat(data)
       //       loaded  ,                compleate  
       this.$refs.scroll.loaded()
      }
     },
     mounted () {
      this.queryDate()
     }
    }
    </script>
    
    <style lang="scss">
    .item{
     background-color: #f2f2f2;
     border-bottom: 1px solid #fff;
     height: 40px;
     line-height: 40px;
     text-align: center;
    }
    </style>
    
    
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기