vue better-scroll 스크롤 플러그 인 배출 구

Better Scroll 은 현재 가장 좋 은 모 바 일 스크롤 플러그 인 이 라 고 불 리 며 강 한 점 은 분명 존재 합 니 다.아니면개인 적 으로 는 좋 은 것 같 아 요.이 글 은 Better Scroll 을 개괄적 으로 말 하 는 것 이 아니 라 스크롤 만 말 하 는 것 입 니 다.이 글 을 깊이 이해 하려 면 걸음 을 옮 겨 주세요여기,이곳
스크롤 원리

better-scroll 은 무슨 스크롤 원리 입 니까?
better-scroll 은 모 바 일 엔 드(PC 지원)의 각종 스크롤 장면 수 요 를 중점적으로 해결 하 는 플러그 인 입 니 다.그 핵심 은 참고 한 iscroll 의 실현 이다.그의 API 디자인 은 기본적으로 iscroll 을 호 환 하고 iscroll 을 바탕 으로 feature 를 확장 하 며 성능 최적화 도 했다.
better-scroll 은 원생 JS 를 바탕 으로 이 루어 진 것 으로 어떠한 프레임 워 크 에 도 의존 하지 않 습 니 다.컴 파일 된 코드 크기 는 63kb 이 고 압축 후 35kb 이 며 gzip 후 9kb 에 불과 하 며 매우 가 벼 운 JS lib 입 니 다.
녹색 부분 은 wrapper,즉 부모 용기 로 고정 높이 가 있 습 니 다.노란색 부분 은 content 입 니 다.부모 용기 의 첫 번 째 키 요소 입 니 다.그 높이 는 내용 의 크기 에 따라 높 아 집 니 다.그러면 콘 텐 츠 의 높이 가 부모 용기 의 높이 를 초과 하지 않 으 면 스크롤 할 수 없 으 며,부모 용기 의 높이 를 초과 하면 콘 텐 츠 영역 을 스크롤 할 수 있 습 니 다.가로 스크롤 의 원 리 는 고정 높이 를 고정 너비 로 바 꾸 는 것 이다.여 긴 잔소리 안 할 게 요)
세로 스크롤
쓸데없는 말 은 그만 하고 우 리 는 직접 코드 를 찍 었 다.

<template>
 <div class="wrapper" ref="wrapper">
   <ul>
    <li v-for="item in 8">{{item}}</li>
   </ul>
 </div>
</template>
<script>
 import BScroll from 'better-scroll';
  export default {
   mounted() {
    this.$nextTick(() => {
     this.scroll = new BScroll(this.$refs.wrapper);
    });
   }
  };
</script>
<style type="text/css">
 .wrapper{
  overflow:hidden;
  height:100vh;
 }
 ul li{
  height:400px;
 }
</style>

이것 은 Vue Better Scroll 수직 스크롤 demo 입 니 다.여기 서 주의해 야 할 것 은 두 가지 가 있 습 니 다.
4

아버지 급 div,즉 용기 만 있 을 수 있 습 니 다

부모 급 div 는 넘 치 는 숨 김 을 설정 하고 고정 높이

가로 스크롤
가로 스크롤,세로 스크롤 보 다 는 스크롤 구역 의 폭 을 동적 으로 가 져 와 코드 를 직접 올 려 야 합 니 다.

<template>
 <div class="tab" ref="tab">
  <ul class="tab_content" ref="tabWrapper">
   <li class="tab_item" v-for="item in itemList" ref="tabitem">
     {{item.title}}
   </li>
  </ul>
 </div>
 </template>
 <script>
 import BScroll from 'better-scroll';
  export default {
   data() {
    return{
     itemList:[
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'   '
     },
     {
      'title':'  '
     },
     {
      'title':'   '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     },
     {
      'title':'  '
     }
     ]
    }
   },
   created() {
    this.$nextTick(() => {
     this.InitTabScroll();
    });
   },
   methods:{
    InitTabScroll(){
     let width=0
     for (let i = 0; i <this.itemList.length; i++) {
       width+=this.$refs.tabitem[0].getBoundingClientRect().width; //getBoundingClientRect()                  
     }
     this.$refs.tabWrapper.style.width=width+'px'
     this.$nextTick(()=>{
       if (!this.scroll) {
        this.scroll=new BScroll(this.$refs.tab, {
         startX:0,
         click:true,
         scrollX:true,
         scrollY:false,
         eventPassthrough:'vertical'
        });
       }else{
        this.scroll.refresh()
       }
     });
    }
   }
  };
 </script>
 <style lang="scss" scoped>
 .tab{
  width: 100vw;
  overflow: hidden;
  padding:5px;
  .tab_content{
   line-height: 2rem;
   display: flex;
   .tab_item{
    flex: 0 0 60px;
    width:60px;
   } 
  }
 } 
 </style>

가로 스크롤 은 주의 가 필요 합 니 다.
4

아버지 급 div,즉 용기 만 있 을 수 있 습 니 다

4

부모 용 기 는 넘 치 는 숨 김 과 고정 폭 을 설정 해 야 합 니 다

동적 으로 스크롤 구역 의 폭 을 가 져 옵 니 다

최근 프로젝트 가 필요 하기 때문에 인터넷 에서 많은 자 료 를 찾 아 봐 도 나의 문 제 를 해결 할 수 없다.베 터 스크롤 홈 페이지 에 도 실제 데모 참고 가 제공 되 지 않 아 휴식 시간 을 이용 해 글 을 썼 다.도움 이 됐 으 면 좋 겠 습 니 다.구체 적 으로 필요 합 니 다demo걸음 을 옮 겨 주세요.스타 에 게 주 는 것 을 잊 지 마 세 요.글 쓰기 가 쉽 지 않 으 니 칭찬 을 해 주세요!
tips:위의 코드 는 직접 사용 할 수 있 습 니 다.어린이 들 이 의존 을 설치 한 후 바로 copy 테스트 를 할 수 있 습 니 다~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.