vue监听滚动事件切换列表和监听onresize事件

vue监听鼠标滚动事件

<script>
    export default {
        name: "home",
        data(){
            return{
                scrollIndex: 0, // 滚动的当前下标
                currentAsideIndex: 0, // 当前侧边栏下标
            }
        },
        mounted () {
             //监听鼠标滚动事件,兼容chrome 、ie 和 firefox
            window.addEventListener('mousewheel',     this.debounce(this.handleScroll,300), true)||window.addEventListener("DOMMouseScroll",this.debounce(this.handleScroll,300),false)
        },
    },
        methods:{
            // 侧边栏切换
            setActiveItem (index) {
                  // 此处是引用elementUI的走马灯组件实现列表切换
                  this.$refs.carousel.setActiveItem(index)
                  this.currentAsideIndex = index
                  this.scrollIndex = index
        },
            //函数防抖
            debounce(func, wait) {
                let timeout;
                return function () {
                    let context = this;
                    let args = arguments;
                    if (timeout) clearTimeout(timeout);
                    timeout = setTimeout(() => {
                        func.apply(context, args)
                    }, wait);
                }
            },
            //判断滚动方向
           handleScroll (e) {
                let direction = e.deltaY > 0 ? 'down' : 'up'
                if (this.scrollIndex === 0) {
                      direction === 'down' ? this.scrollIndex++ : this.scrollIndex = 0
                } else if (this.scrollIndex === this.navList.length - 1) {
                      direction === 'down' ? this.scrollIndex = (this.navList.length - 1) :   this.scrollIndex--
               } else {
                    direction === 'down' ? this.scrollIndex++ : this.scrollIndex--
              }
              this.setActiveItem(this.scrollIndex)
           }                    
        }
</script>

vue监听onresize事件

• 需求：
  （1）页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置；
  （2）页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸；
  window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。
  解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。

<div class="box" :style="{height:screenHeight}"></div>

data () {
    return {
      screenHeight: '', // 页面内部的动态高度
    }
},
mounted(){
    // 监听浏览器窗口缩放事件
    this.screenHeight = (document.body.clientHeight - 100) + 'px'
    window.onresize = () => {
      return (() => {
        this.screenHeight = (document.body.clientHeight - 100) + 'px'
      })()
    }
}