zoukankan      html  css  js  c++  java
  • vue 中监听页面滚动

    监听页面滚动

    在methods中定义一个方法

    
    
    handleScroll() {
    //获取滚动时的高度
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            let oneHeight = this.$refs.scrollOne.offsetHeight ;
            let twoHeight = this.$refs.scrollTwo.offsetHeight + oneHeight;
            let threeHeight = this.$refs.scrollThree.offsetHeight + twoHeight;
            // 
            // console.log(scrollTop)
            if (scrollTop > 0) {
              //滚动大于0的时候要做的操作
            }
            if (scrollTop > 200) {
              //大于200的时候要做的操作
            }
            if (scrollTop > oneHeight) {
              //这是滑动到scrollTwo的距离要做的操作
    } if (scrollTop > twoHeight) { //这是滑动到scrollThree要做的操作 }

    html中

    <div class="gooddetail-info">
            <div ref="scrollOne"></div>
            <div ref="scrollTwo"></div>
            <div ref="scrollThree"></div>
     </div>

    在mounted监听

     mounted() {
          window.addEventListener("scroll",this.handleScroll); 
    },

    最后要销毁这个监听要不然会在其他的页面中 执行 报错

    destroyed() {
          document.removeEventListener('scroll', this.handleScroll)
        }
  • 相关阅读:
    确定查询各阶段消耗的时间
    mysql 处理查询请求过程
    如何获取有性能问题的SQL
    索引优化策略
    CXF支持 SOAP1.1 SOAP1.2协议
    MYSQL 基于GTID的复制
    poj2056
    poj2049
    poj1033
    poj1221
  • 原文地址:https://www.cnblogs.com/toughy/p/11805844.html
Copyright © 2011-2022 走看看