vue 는 mint-ui 를 사용 하여 드 롭 다운 리 셋 과 무한 스크롤 을 실현 하 는 예제 코드 입 니 다.

웹-app 을 개발 할 때 v-for 에서 나 오 는 li 가 많 습 니 다.데이터 가 수백 수천 개 에 달 할 때 같이 불 러 오 면 사용자 체험 이 좋 지 않 습 니 다.
이 때 우 리 는 무한 스크롤 과 드 롭 다운 리 셋 을 사용 하여 디 스 플레이 의 수량 을 제어 할 수 있 습 니 다.마지막 경 계 를 리 셋 할 때 무한 스크롤 이벤트 가 발생 하여 일정 수량의 항목 을 다시 불 러 옵 니 다.
아니면 프로젝트 의 기능 을 가지 고 밤 을 들 어 소개 할 까요?

목록 이 있 습 니 다.수천 개의 데 이 터 를 페이지 별로 조회 하고 매번 조회 20 개 를 표시 하 는 것 을 제한 합 니 다.마지막 20 개의 가장자리 로 끌 어 올 릴 때마다 무한 스크롤 을 실행 합 니 다.이 럴 때 로 딩 아이콘 이 나타 나 고 후속 20 개의 데 이 터 를 계속 불 러 옵 니 다.마지막 으로 불 러 올 때 데이터'추가 완료'를 알려 줍 니 다.

프로젝트 ui 에서 사용 하 는 mint-ui 이기 때문에 무한 스크롤 도 mint-ui 에 있 습 니 다.공식 문 서 를 참조 하 십시오.
다음은 코드 실현 을 소개 합 니 다.
1.요소 에 v-infinite-scroll 명령 을 추가 하면 무한 스크롤 을 사용 할 수 있 습 니 다.이 요 소 를 굴 리 면 아래쪽 과 굴 러 가 는 요소 의 아래쪽 거리 가 주어진 한도 값 보다 작 을 때(infinite-scroll-distance 설정 을 통 해)v-infinite-scroll 명령 에 연결 하 는 방법 이 실 행 됩 니 다.

<!--ul    scoller         api-->
<ul class="mui-table-view" v-infinite-scroll="loadMore" infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0" infinite-scroll-immediate-check="false">
 <!--li        -->
 <li class="mui-table-view-cell" v-for="item in list">
  <a class="mui-navigate-right">
   <span class="mui-pull-left">{{item.name}}</span>
   <span class="mui-pull-right">{{item.date.substring(0,10)}}</span>
  </a>
 </li>
 <!--             “    ”-->
 <li class="more_loading" v-show="!queryLoading">
  <mt-spinner type="snake" color="#00ccff" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
  <span v-show="allLoaded">     </span>
 </li>
</ul>

2.script 부분

<script>
 export default {
  data() {
   return {
    //           
    queryLoading: false,
    moreLoading: false,
    allLoaded: false,
    totalNum: 0,
    pageSize: 20,
    pageNum: 1,
   }
  },
  computed: {
   params() {
    return{
     //              
     //       20           
     pageSize: this.pageSize
     }
   }
  },
  methods: {
   //      
   loadMore() {
    if(this.allLoaded){
     this.moreLoading = true;
     return;
    }
    if(this.queryLoading){
     return;
    }
    this.moreLoading = !this.queryLoading;
    this.pageNum++;
    this.$http.post("         ",Object.assign({pageNum:this.pageNum},this.params)).then((res) => {
     if(res.sData && res.sData.list){
      this.list = this.list.concat(res.sData.list);
      this.allLoaded = this.debtList.length==this.totalNum;
     }
     this.moreLoading = this.allLoaded;
    });
   }
  },
 }
</script>

여기까지 무한 스크롤 을 실현 할 수 있 습 니 다.여기 에는 mint-uiInfinite scroll와Spinner가 결합 되 어 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.