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 元素优异的操作能力,我们可以很轻易的对获取 ...
随机推荐
- Runtime 打开记事本
package com.direct.str; import java.io.IOException; public class RunTimeDemo { /** * @param args */ ...
- [ZJOI2008]杀蚂蚁 Solution
题目太长,不在此显示,见洛谷P2586 http://daniu.luogu.org/problem/show?pid=2586 模拟, 那就模拟呗: 各种WA, 然后好久才A了: 一种被社会报复了的 ...
- windows操作系统用命令提示符查看占用端口号的进程
在开发中有时我们需要确定哪个占用了8080端口,在windows命令行窗口下执行: 命令执行后打印出来的结果如下所示:
- gulp 打包报错:Error: `libsass` bindings not found. Try reinstalling `node-sass`
看了网上很多帖子 有说切换node版本的 有说卸载重新装gulp-sass的 有说删除node_modules重新install的 但是我测试了下在我们的电脑环境下都不行,后来找到一个可以打包不报错的 ...
- java简单数组定义
public class Shuzu { static int[] array = new int[] { 32, 2, 2, 5, 45, }; int[] array1[] = new int[1 ...
- IE、火狐、谷歌浏览器下兼容统一select样式
项目开发时,对于不同浏览器下的select样式不统一问题,各种查,这里记录一下,项目已使用 IE浏览器下样式: 火狐浏览器下样式: 谷歌浏览器下样式: 上代码: 1.html 2.css 至此,大功告 ...
- sql-(Cross||Outer)Apply
Apply - 涉及以下两个步骤中的一步或两步(取决于Apply的类型): 1.A1:把右表表达式应用于左表的行 2.A2:添加外部行 Apply运算符把右表表达式应用于左输入的每一行.右表达式可以引 ...
- cacti 安装与 与不能显示图像故障解决方案
on debian 7&8 apt-get install snmp snmpd apt-get install cacti cacti-spine apt-get install moreu ...
- 测试你的 In-app Billing 程序
测试你的 In-app Billing 程序 为了保证 In-app Billing 可以在你程序中正常使用,你应该在把应用程序发布到Google Play之前进行测试.早期的测试有助于确保用户对于你 ...
- Java基础知识强化之集合框架笔记78:ConcurrentHashMap之 ConcurrentHashMap、Hashtable、HashMap、TreeMap区别
1. Hashtable: (1)是一个包含单向链的二维数组,table数组中是Entry<K,V>存储,entry对象: (2)放入的value不能为空: (3)线程安全的,所有方法均用 ...