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