vue中监听页面滚动和监听某元素滚动
①监听页面滚动
在生命周期mounted中进行监听滚动:
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
在方法中定义监听滚动执行的方法:
scrollToTop() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop)
},
②监听某元素滚动
tips:需要监听的这个元素需要拥有固定的高度
vue组件中:
<div class="read-con" @scroll="scrollEvent" >
</div>
在方法中定义scrolldiv,是监听class为read-con滚动以后需要执行的方法
scrollEvent () {
let _this = this
let read = _this.$el.querySelector('#read')
console.log(read.scrollToTop)
},

vue中监听页面滚动和监听某元素滚动的更多相关文章
- 修改vue中的挂载页面(index.html)的路径
修改vue中的挂载页面(index.html)的路径 2019年03月30日 12:07:12 VegasLemon 阅读数 501 版权声明:本文为博主原创文章,未经博主允许不得转载. htt ...
- vue中如何刷新页面
vue中刷新页面的方法 1. 不能使用 this.$router.go(0) 或者 window.reload() 不起作用还特别恶心 这个才是有效果的刷新页面,只要照图敲,就能有效果 我们在 app ...
- Vue中Js动画 与Velocity.js 多组件多元素 列表过渡
Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...
- 小程序的数据监听 用法和vue中的watch一样====使用通配符监听所有自数据字段的变化
使用通配符监听所有自数据字段的变化
- vue中watch和computed为什么能监听到数据的改变以及不同之处
先来个流程图,水平有限,凑活看吧-_-|| 首先在创建一个Vue应用时: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } ...
- vue中跳转页面逻辑
跳转详情页面具体代码 写这个页面需要安装两个 1.安装axios命令 Cnpm install axios --save 2.安装vant Cnpm install vant --save 在inde ...
- vue中如果在页面中v-model的是字典,那么在定义字典的时候,需要明确定义键值为''或者[],否则给字典的键值赋值后页面不显示
如题 在template模板中 {{}} {{form_temp.blOwnerMemberList}} #是字典的形式哦 {{}} 在return的属性中 form_temp: { blOwnerM ...
- vue中router-link的详细用法
官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串 <router-link to=&q ...
- 浅谈Vue中计算属性computed的实现原理
虽然目前的技术栈已由Vue转到了React,但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的,Vue文档清晰规范,api设计简洁高效,对前端开发人员友好,上手快,甚至个人认为在很多场景使用V ...
- Vue.js-11:第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
随机推荐
- toast, 警告窗
//浮动提示框 1秒后消失 toast(msg, isError, sec) { var div = $('#toast'); div.html(msg); div.css({visibility: ...
- <Android 应用 之路> MPAndroidChart~PieChart
简介 MPAndroidChart是PhilJay大神给Android开发者带来的福利.MPAndroidChart是一个功能强大并且使用灵活的图表开源库,支持Android和IOS两种,这里我们暂时 ...
- Maven-pom-configuration
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- Difference between scipy.fftpack and numpy.fft
scipy.fftpack 和 numpy.fft 的区别 When applying scipy.fftpack.rfft and numpy.fft.rfft I get the followin ...
- Android 获取SD卡的图片资源
首先我先获得SD卡下的根目录路径: privateString isSdcard(){ File sdcardDir=null; boolean isSDExist=Environment.getEx ...
- Fragment 重叠 遮盖问题
1.导致Fragment 重叠 和遮盖的原因 主要还是因为Fragment的状态保存机制,当系统内存不足时,Fragment的主Activity被回收,Fragment的实例并没有随之被回收. Act ...
- Android深入理解Context(三)Context完全解析
1· Context类型 我们知道,Android应用都是使用Java语言来编写的,那么大家可以思考一下,一个Android程序和一个Java程序,他们最大的区别在哪里?划分界限又是 ...
- gitlab一次代码回滚引起的bug...
问题描述:线上问题有一个bug,挺严重的.在线下排查后发现是一个之前的同事添加的代码影响的,为了不影响之前的业务,代码回滚了. 但是 过了几天,测人人员测试之后说这个问题又复现了,然后再次看,发现还是 ...
- xml php 解析
JSON作为数据交换可以说已经成为了一种事实上的标准,但是前几年和它对应的xml虽然说用的越来越少,但是我感觉还是有他可以应用的地方. json更偏重于程序员来使用和解读,而xml则更适合用户来使用和 ...
- Castle.Windsor IOC/AOP的使用
Castle最早在2003年诞生于Apache Avalon项目,目的是为了创建一个IOC(控制反转)框架.发展到现在已经有4个组件了,分别是ActiveRecord(ORM组件).Windsor(I ...