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 元素优异的操作能力,我们可以很轻易的对获取 ...
随机推荐
- 《CSS3揭秘》上(边框,投影,渐变,条纹效果,蚂蚁行军)
最近看了<CSS3揭秘>一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找.不得不感叹学无止境哦~ 1.边框与背景 半透明边框 .demo{ background- ...
- 01.css选择器-->类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- EntityFramework(1)
EntityFramework核心是EDM实体数据模型,该模型由三部分组成. (1) 概念模型,由概念架构定义语言文件(.csdl)来定义. (2) 映射,由映射规范语言文件(.msl)定义. (3) ...
- jQuery轮播图(一)轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
- JQuery 更改属性 JQ对象循环 each 全选反选 三元运算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C++学习笔记(7)----类的数组中构造函数和析构函数的调用顺序
C++类的数组中构造函数和析构函数的调用顺序(2) 对于如下的代码: #include<iostream> using namespace std; class CBase { priva ...
- Linked List Cycle 判断一个链表是否存在回路(循环)
Given a linked list, determine if it has a cycle in it. Follow up:Can you solve it without using ext ...
- 使用@Value进行静态常量的值注入
@Component public class ExpressConstant { public static String URL; @Value("${express.url}" ...
- C# winfrom Datagridview表头样式和选中样式
Griscolor是表格线的颜色 表头的样式修改如下图: 选中某一行的样色设置
- 转载:什么才是真正的 RESTful 架构
What? Wikipedia: 表征性状态传输(英文:Representational State Transfer,简称REST)是Roy Fielding博士于2000年在他的博士论文中提出来的 ...