vue 는 better-scroll 을 사용 하여 가로 스크롤 을 실현 하 는 방법 인 스 턴 스 를 사용 합 니 다.

1.구 르 는 실현 원리
better-scroll 의 스크롤 원 리 는 브 라 우 저 원생 스크롤 원리 와 같 습 니 다.하위 상자 의 높이 가 부모 상자 의 높이 보다 크 면 수직 스크롤 이 나타 납 니 다.마찬가지 로 하위 상자 의 너비 가 부모 상자 의 너비 보다 크 면 가로 스크롤 이 나타 납 니 다.
2.better-scroll 의 html 구조
먼저 better-scroll 에서 흔히 볼 수 있 는 html 구 조 를 살 펴 보 겠 습 니 다.

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
</div>

Better Scroll 은 외부 wrapper 용기 에 적용 되 며 스크롤 부분 은 content 입 니 다.wrapper 의 기본 적 인 상황 에서 Better Scroll 처리 용기()의 첫 번 째 키 요소(내용)의 스크롤 은 다른 요소 가 무시 되 는 것 을 의미 합 니 다.
3.Vue 에서 better-scroll 사용

npm install better-scroll --save  //npm   
import BScroll from 'better-scroll'  //       better-scroll

<template>
   /*      */
   /*       */
<div
        class="wrapper_box"
        style="min-height:100vh;
        "
        ref="wrapper"
        v-else
      >
      /*       ，     */
        <div class="content" ref="wrapperChild">
          <div
            v-for="(item, index) in currentImgList"
            :key="index"
            class="imgItem"
          >
            <img :src="item.img" class="img" style="margin: 0 10px;" />
          </div>
        </div>
      </div>
</template>
<script>
 import BScroll from "better-scroll";
 export default {
  data() {
    return {
      currentImgList: [
        { img: require("../../assets/image/zzb_1.png") },
        { img: require("../../assets/image/zzb_2.png") },
        { img: require("../../assets/image/zzb_3.png") }
      ],
    };
  },
  mounted() {
    this.slide_x(); //    
  },
  methods: {
     //    
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, { //    BScroll      ，        dom  
          startX: 0, ///           better-scroll     ，      
          click: true,
          scrollX: true,
          scrollY: false, //          
          eventPassthrough: "vertical",
          useTransition: false //              
        });
      } else {
        this.scroll.refresh(); //  dom                         
      }
    },
    //     
    _calculateWidth() {
      //       imgItem    
      let rampageList = this.$refs.wrapperChild.getElementsByClassName(
        "imgItem"
      );
      //         
      let initWidth = 0;
      //     
      for (let i = 0; i < rampageList.length; i++) {
        const item = rampageList[i];
        //           
        initWidth += item.clientWidth;
      }
      //         
      this.$refs.wrapperChild.style.width = `${initWidth}px`;
    },
    slide_x() {
      this.$nextTick(() => { //this.$nextTick        ，     DOM       
        this._initScroll(); //    
        this._calculateWidth(); //     
      });
    },
    },
   

};
</script>

다음은 플러그 인 원작 자가 말 한 것 입 니 다.

4.문제 가 생기 기 쉬 운 점:

페이지 DOM 렌 더 링 이 완 료 될 때 까지 기 다 렸 다가 BScroll 의 실례 화 를 실행 해 야 합 니 다.mounted 갈고리 함수 에서 실행 하 는 것 을 권장 합 니 다

4.567917.하위 상자 의 너 비 는 부모 상자 의 너비 보다 크다.
마지막.
better-scroll 플러그 인 작성 자의 글,better-scroll 이 정말 강하 군요!
better-scroll 에서 Vue 를 만 났 을 때
Vue 에서 better-scroll 로 가로 스크롤
vue 가 better-scroll 을 사용 하여 가로 스크롤 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue better-scroll 이 가로 스크롤 을 실현 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!