放学我当家2,希内安娜,支付宝钱包部分免单
思路:scroll在哪儿个组件内,就在获取那个dom元素。网上好多思路是
window.addeventlistener("scroll", function(){ console.log('scrolling'); });
这是监听不到的!如果你整个网页可以滑动,或许还可以试试!
对于像我这样,只在页面的内的一个div内要监听的。
实现代码如下:
第一步:滑动的组件外层的div加 ref="viewbox" 为了通过$refs获取dom元素
<!--设备列表--> <div class="devicewrapper" ref="viewbox"> <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/> <div class="demo-grid"> <!--设备列表 手机一行两列 pad一行4列--> <mu-row> <mu-col v-for="device in deviceslist" width="50" tablet="25" desktop="25"> <devicecardview :device-data="device""></devicelightcardview> </mu-col> </mu-row> </div> <p class="bottomline" v-bind:class="{bottomlinevisible:isscroll}">---------------------我是有底线的---------------------</p> </div>
第二步:
mounted() { // 通过$refs获取dom元素 this.box = this.$refs.viewbox // 监听这个dom的scroll事件 this.box.addeventlistener('scroll', () => { console.log(" scroll " + this.$refs.viewbox.scrolltop) //以下是我自己的需求,向下滚动的时候显示“我是有底线的(类似支付宝)” this.isscroll=this.$refs.viewbox.scrolltop>0 }, false) }
ps:具体怎么做,看需求了。只要能打印出来.scrolltop就行了
以上这篇使用vue.js在页面内组件监听scroll事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论