[VUE] 스크롤 이벤트 주기

이벤트를 주고 싶은 section의 offsetTop값이 스크롤값보다 같거나 작으면 이벤트가 실행되게 해야한다.

평소에 제이쿼리로 쉽게 하던 작업인데 이걸 뷰로 풀어야 해서 어떻게 해야하나 고민했다.

 

컴포넌트를 평소대로 작업하고, 이들을 감싸는 index에서 스크롤 이벤트를 작업한다.

 

---

 

 

1. 컴포넌트 작업 

 

공통 스타일은 리스트아이템으로 작업

 

 

<template>
  <div class="video-box" :style="{backgroundColor:listItem.bgColor}">
    <div class="txt-box">
      <div class="txt-top">
        <p :class="{'bold': listItem.isBold_1}">{{listItem.ttl1}}</p>
        <p :class="{'bold': listItem.isBold_2}">{{listItem.ttl2}}</p>
      </div>
      <p>{{listItem.txt1}}<br>{{listItem.txt2}}<br>{{listItem.txt3}}</p>
    </div>
    <!-- <img :src="listItem.imgSRC"> -->
    <video
        ref="video"
        muted   // ! autoplay를 하려면 muted 필수
        autoplay
        loop
        playsinline>
        <source :src="listItem.videoURL" type="video/mp4" />
    </video>
  </div>
</template>

<script>
  export default {
    props: [
      'listItem'
    ]
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/styles/_mixin.scss';

  .video-box {
    padding: 14.993vw 0;

    img,
    video {
      width: 100%;
    }

    .txt-box {
      text-align: center;

      .txt-top {
        font-size: 6.297vw;
        line-height: 1.3;

        p.bold {
          font-weight: 700;
        }
      }

      >p {
        padding: 5.247vw 0;
        font-size: 3.823vw;
        line-height: 1.27;
        color: #666666;
      }
    }
  }
</style>

 

 

 

 

2. 컴포넌트 작업

 

레이아웃은 같은데 스타일만 달라서 데이터로 넘기기

바뀌는 내용만 컴포넌트 index에서 데이터로 넘겨주기

 

watch는 Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행되는 기능이다

 

<template>
  <section>
    <list-item v-for="(item, key) in lists" :key="key" 
      :listItem="item"
      :id="item.id"      
      >
    </list-item>
  </section>
</template>

<script>
  import ListItem from "@/components/mobile/section2/listItem";
  export default {
    name: "section2",
    props: [
      'active'
    ],
    components: {
      ListItem
    },

    watch: {
      active() {
        if (this.active) {
          this.boldActive();
        }
      }
    },

    data() {
      return {
        lists: [{
            isBold_1: true,
            isBold_2: false,
            bgColor: '#f1f8fe',
            imgSRC: require('@/'),
            videoURL: ''
          },
          {
            isBold_1: true,
            isBold_2: false,
            bgColor: '#faf6db',
            imgSRC: require('@/'),
            videoURL: ''
          }
        ],
      }
    },

    methods: {
      boldActive(){

        setTimeout(()=>{  
          this.lists[0].isBold_1 = false;
          this.lists[0].isBold_2 = true;
        }, 1000);

        setTimeout(()=>{  
          this.lists[1].isBold_1 = false;
          this.lists[1].isBold_2 = true;
        }, 1000);
        
      }
    }
  }
</script>

 

 

 

 

3. index 작업

 

전체 스크롤 Y 값과 section2의 offsetTop 값의 차이를 계산해서 이벤트 주기

 

<template>
  <div>
    <section2 
    	ref="section2" 
    	:active="section2Active" 
    	class="section section2" />
  </div>
</template>

<script>
import section2 from './section2/index.vue';

export default {
  name: 'App',
  
  components: {
    section2
  },
  
  mounted() {
    window.addEventListener('scroll', this.scrollBind);
  },
  
  data() {
    return {
      section2Active: false
    }
  },
  
  methods: {
    scrollBind() {
      let top = this.$refs.section2.$el.offsetTop - 100;
      if (top < window.scrollY) {
        this.section2Active = true;
      }
    }
  }
}
</script>