vue 滚屏

GllWyz

已于 2024-03-02 18:22:03 修改

阅读量1.1k

点赞数 4

分类专栏： # Vue2.0功能文章标签： vue滚动滚动事件

于 2019-11-28 12:49:08 首次发布

本文链接：https://blog.csdn.net/zhumizhumi/article/details/103291391

版权

Vue2.0功能专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、效果图

竖屏整屏鼠标滚动，鼠标下滑或者上滑一次就会滚动一个页面【没有使用插件，网上也有比较充足的有关vue滚屏的插件不想手写的也可以去用插件实现，我看着比较麻烦就弃用了】

二、代码

HTML：

<template>
  <div class="Demo">
    <div></div>
    <div></div>
    <div></div>
  </div>
</template>

JS：

<script>
  export default {
    name: 'Demo',
    data () {
      return {
        index: 0, // 索引
        delay: 500, // 滚动事件间隔时间
        lock: false // 锁
      }
    },
    mounted () {
      this.$el.addEventListener('mousewheel', this.mousewheelHandler)
    },
    watch: {
      index (newVal, oldVal) {
        if (newVal !== oldVal) { // 防止往相同的位置滚动后就要无辜等待delay秒才能再次滚动
          this.lock = true
        }
      }
    },
    methods: {
      mousewheelHandler (event) {
        let value = event.wheelDelta > 0 ? 'up' : 'down'
        this.scrollHandler(value)
      },
      scrollHandler (value) {
        if (this.lock) {
          return
        }
        let mapIndex = {
          up: Math.max(0, this.index - 1),
          down: Math.min(this.$el.children.length - 1, this.index + 1)
        }
        this.index = mapIndex[value]
        this.$el.children[this.index].scrollIntoView({ behavior: 'smooth' })
        setTimeout(() => this.lock = false, this.delay)
      }
    }
  }
</script>

CSS：

<style scoped>
  .Demo {
    overflow: hidden;
  }
  .Demo,
  .Demo > div {
    height: 100%;
  }
  .Demo > div:nth-child(1) {
    background-color: #f00;
  }
  .Demo > div:nth-child(2) {
    background-color: #0f0;
  }
  .Demo > div:nth-child(3) {
    background-color: #00f;
  }
</style>