关于vue.js:vue滚动监听

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们常常会须要滚动事件, 咱们也会用到滚动监听, 上面我来分享一下办法。
4. 废话不多说, 间接上代码:

<van-popup v-model="showseletboo" class="showseletb" position="bottom" id="showseletb">
   <div class="showseletbcon" @scroll="handleScroll" ref="amobile">
    <v-distpicker type="mobile">
    </v-distpicker>
   </div>
  </van-popup>

// 在这里我应用的是 ref 进行获取元素 

5. 在 mounted 中增加如下代码:

let _this = this;
   this.$nextTick(() => {window.addEventListener('scroll', _this.handleScroll, true);
   })

// 留神: 在这里如果不增加 true 这个监听没有成果 

6. 在 methods 中增加如下代码:

// 滚动监听
   handleScroll(e) {
    // scrollHeight（文档内容理论高度，包含超出视窗的溢出局部）、// scrollTop（滚动条滚动间隔）、// clientHeight（窗口可视范畴高度）。// const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

    let ascrollheight = this.$refs.amobile.scrollTop;
    // console.log(this.$refs.amobile);
    console.log(ascrollheight); // 输入 滚动的间隔
    // 滚动条到底部的条件
    // 滚动条到底部的条件
    // if (scrollTop + clientHeight == scrollHeight) {
    //  // div 到头部的间隔 + 屏幕高度 = 可滚动的总高度
        // 依据本人的需要进行操作
    // }

   },

7. 留神:

// 给对应的款式增加
.showseletbcon {
  height: 100%;
  /* overflow: visible; */
  overflow-y: auto; // 要害代码, 如何没有这个款式失去的滚动间隔后果为 0
 }

.showseletb {
  width: 100%;
  height: 300px !important;
  /* border: 2px solid blue; */
  background-color: white;
  overflow-y: auto;  // 要害代码, 如何没有这个款式失去的滚动间隔后果为 0
  position: relative;
 }

8. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。