Zenn
😺

vue3でスライダーとスクロールの位置情報と移動（簡易版）

2021/12/19に公開
TypeScript
Vue.js
tech

はじめに

デザインは考慮していません。ライブラリは利用していません。
たいしたことしていません。
ただ、これベースでいろいろ応用ができそう。

環境

  • vue3
  • typescript

内容

スライダー

  • したこと
    2秒ごとに箱の色が変わる。ボタンクリックでも色を変えれる。
  • コード
<template>
  <div class="box" :style="{'background-color':sliderArray[currentNum]}"></div>
  <button @click="next">next</button>
</template>
<script lang="ts">
import { defineComponent, onMounted,ref } from "vue"

export default defineComponent ({
  setup () {
    const sliderArray=ref()
    const currentNum=ref(0)
    sliderArray.value=['red','blue','black','yellow','green']
    const next=()=>{
      if(currentNum.value<sliderArray.value.length-1){
        currentNum.value+=1
      }else{
        currentNum.value=0
      }
    }
    onMounted(()=>{
      setInterval(()=>{
        if(currentNum.value < sliderArray.value.length-1){
          currentNum.value+=1
        }else{
          currentNum.value=0
        }
      },2000)
    })
    return {
      currentNum,
      sliderArray,
      next
    }
  }
})
</script>
<style lang="scss">
.box{
  width:100px;
  height: 100px;
}
</style>

スクロールの位置取得

<template>
  <div class="box" v-if="displayBox"></div>
</template>
<script lang="ts">
import { defineComponent, h, onMounted,ref } from "vue"

export default defineComponent ({
  setup () {
    const displayBox=ref(false)
    onMounted(()=>{
      window.addEventListener('scroll',()=>{
        if(window.scrollY > 100 && window.scrollY < 300){
          displayBox.value=true
        }else{
          displayBox.value=false
        }
      })
    })
    return{
      displayBox
    }
  }
})
</script>
<style lang="scss">
body{
  height: 2000px;
}
.box{
  width:100px;
  height: 100px;
  background-color: red;
  position: relative;
  top:200px;
  left:0px;
}
</style>

スクロールの移動

<template>
  <button @click="move">下に移動</button>
</template>
<script lang="ts">
import { defineComponent} from "vue"

export default defineComponent ({
  setup () {
    const move=()=>{
      scrollTo({
        top:200,
        left:0,
        behavior:'smooth'
      });
    }
    return{
      move
    }
  }
})
</script>
<style lang="scss">
body{
  height: 2000px;
}

</style>

以上になります

Discussion