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 元素优异的操作能力,我们可以很轻易的对获取 ...
随机推荐
- Luogu3804:[模板]后缀自动机
题面 luogu Sol \(sam\)然后树形\(DP\) 当时还不会拓扑排序的我 # include <bits/stdc++.h> # define IL inline # defi ...
- JavaWeb学习总结(三):Servlet开发(一)
一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...
- 微信开发 获取AccessToken
获取AccessToken的方法 public static Access_token GetAccessToken() { string formatString = String.Format(& ...
- 解释型vs编译型 动态vs静态 强类型vs弱类型
------------------------------------------------------------ 释型.动态语言与静态语言.强类型语言与弱类型语言的区别 编译型和解释型 我们先 ...
- php 在字符串指定位置插入新字符
因为项目用到DataTable表格加载后台数据,要连表查询虚拟机选中的策略状态,所以想到先把策略表内容取出来,组成一个'<select><option value="1&q ...
- MooseFS安装部署
环境信息 Master服务器 dev04 chunkserver服务器 dev02.dev03.dev04 metalogger服务器 dev03 mount客户端 dev01.dev02 安装前下载 ...
- No enum constant org.apache.ibatis.type.JdbcType.Integer
同事今天在用mybatis查询时候,报了上面这个问题.上网查了下,原来是mybatis封装类型的问题.原因是在resultMap中jdbcType写为了Integer,但是在MyBatis中没有这个数 ...
- spring boot(6)-JdbcTemplate访问数据库
pom.xml 添加jdbc模块和mysql依赖 <dependency> <groupId>org.springframework.boot</groupId&g ...
- 平均负载(Load average)
load average 的含义平均负载(load average)是指系统的运行队列的平均利用率,也可以认为是可运行进程的平均数. top命令中load average显示的是最近1分钟.5分钟和1 ...
- Windows API 查找窗体,发送Windows消息
最近项目中需要做Windows消息截获操作,在网上找了一些资料. public class WindowsAPI { /// <summary> /// 回调函数代理 /// </s ...