关于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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。