집 > 기사 > 웹 프론트엔드 > vue에서 더 나은 스크롤 스크롤 플러그인 사용

vue에서 더 나은 스크롤 스크롤 플러그인 사용

亚连원래의: 2018-06-06 17:36:082466검색

이 글은 주로 vue better-scrolling 플러그인 문제 해결에 대한 자세한 설명을 소개하고 참고 자료를 제공합니다.

BetterScroll은 현재 최고의 모바일 스크롤 플러그인으로 알려져 있으므로 그 파워는 확실히 존재합니다. 그렇지 않으면...하하. 개인적으로 매우 유용하다고 생각합니다. 이 기사는 BetterScroll에 대한 일반적인 내용이 아니라 스크롤에 대한 자세한 내용을 알아보려면 여기를 방문하세요.

스크롤링 원리

better-scroll 스크롤링 원리

better-scroll은 모바일 측의 다양한 스크롤 시나리오 요구 사항을 해결하는 데 중점을 둔 플러그인입니다(PC는 지원됨). . 그 핵심은 iscroll의 구현을 기반으로 합니다. API 디자인은 기본적으로 iscroll을 기반으로 일부 기능을 확장하고 일부 성능을 최적화했습니다.

better-scroll은 기본 JS를 기반으로 구현되며 어떤 프레임워크에도 의존하지 않습니다. 컴파일된 코드 크기는 63kb, 압축 후 35kb, gzip 후에는 9kb에 불과합니다. 매우 가벼운 JS lib입니다.

녹색 부분은 상위 컨테이너인 래퍼입니다. 높이가 고정되어 있습니다. 노란색 부분은 콘텐츠로, 콘텐츠 크기에 따라 높이가 증가합니다. 그런 다음 콘텐츠 높이가 상위 컨테이너의 높이를 초과하지 않으면 스크롤할 수 없습니다. 콘텐츠 높이가 상위 컨테이너의 높이를 초과하면 콘텐츠 영역을 스크롤할 수 있습니다. 가로 스크롤의 원리는 고정된 높이를 고정된 너비로 변경하는 것입니다. (여기서는 더 이상 장황하지 않습니다.)

세로 스크롤

더 이상 고민하지 않고 바로 코드로 넘어가겠습니다.

<template>
 <p class="wrapper" ref="wrapper">
   <ul>
    <li v-for="item in 8">{{item}}</li>
   </ul>
 </p>
</template>
<script>
 import BScroll from &#39;better-scroll&#39;;
  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 BetterScroll 수직 스크롤 데모입니다. 여기서 주목해야 할 두 가지 사항이 있습니다.

컨테이너인 상위 p 레이어는 하나만 있을 수 있습니다.
상위 p는 오버플로 숨김과 고정 높이를 설정해야 합니다.

수평 스크롤

수평 스크롤은 다음과 비교하여 동적이어야 합니다. 수직 스크롤 스크롤 영역의 너비를 얻으려면 코드로 직접 이동하십시오.

<template>
 <p 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>
 </p>
 </template>
 <script>
 import BScroll from &#39;better-scroll&#39;;
  export default {
   data() {
    return{
     itemList:[
     {
      &#39;title&#39;:&#39;关注&#39;
     },
     {
      &#39;title&#39;:&#39;推荐&#39;
     },
     {
      &#39;title&#39;:&#39;深圳&#39;
     },
     {
      &#39;title&#39;:&#39;视频&#39;
     },
     {
      &#39;title&#39;:&#39;音乐&#39;
     },
     {
      &#39;title&#39;:&#39;热点&#39;
     },
     {
      &#39;title&#39;:&#39;新时代&#39;
     },
     {
      &#39;title&#39;:&#39;娱乐&#39;
     },
     {
      &#39;title&#39;:&#39;头条号&#39;
     },
     {
      &#39;title&#39;:&#39;问答&#39;
     },
     {
      &#39;title&#39;:&#39;图片&#39;
     },
     {
      &#39;title&#39;:&#39;科技&#39;
     },
     {
      &#39;title&#39;:&#39;体育&#39;
     },
     {
      &#39;title&#39;:&#39;财经&#39;
     },
     {
      &#39;title&#39;:&#39;军事&#39;
     },
     {
      &#39;title&#39;:&#39;国际&#39;
     }
     ]
    }
   },
   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+&#39;px&#39;
     this.$nextTick(()=>{
       if (!this.scroll) {
        this.scroll=new BScroll(this.$refs.tab, {
         startX:0,
         click:true,
         scrollX:true,
         scrollY:false,
         eventPassthrough:&#39;vertical&#39;
        });
       }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>

가로 스크롤에는 주의가 필요합니다.

컨테이너인 상위 p 레이어는 하나만 있을 수 있습니다.
상위 컨테이너는 오버플로 숨김 및 고정 너비를 설정해야 합니다.
스크롤 영역의 너비를 동적으로 얻습니다

때문에 최근 프로젝트 요구사항을 인터넷에서 얻었습니다. 많은 정보를 상담한 후에도 여전히 문제를 해결할 수 없습니다. BetterScroll 공식 웹사이트에서는 실제 데모 참조 자료를 제공하지 않으므로 휴식 시간을 활용하여 이 기사를 작성했습니다. 그것이 당신에게 유용하길 바랍니다. 특정 데모가 필요한 경우 여기로 이동하여 별표를 작성하는 것을 잊지 마세요. 기사를 작성하는 것이 쉽지 않으니 좋아요를 눌러주세요!

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

vue에서 더 나은 스크롤 스크롤 플러그인 사용

관련 기사