vue中判断页面滚动开始和结束
- export default {
- data() {
- return {
- oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
- scrollTop: 0 // 记录当前的滚动距离
- }
- },
- watch: {
- scrollTop(newValue, oldValue) {
- setTimeout(() => {
- if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY,代表滚动结束
- console.log('滚动结束');
- this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
- };
- }, 20); //必须使用延时器,否则每次newValue和window.scrollY都相等,无法判断,20ms刚好大于watch的侦听周期,故延时20ms
- if(this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等
- console.log('滚动开始');
- }
- }
- },
- methods: {
- handleScroll() {
- window.addEventListener('scroll', () => {
- this.scrollTop = window.scrollY;
- })
- }
- },
- mounted() {
- this.handleScroll();
- },
- beforeDestroy() {
- window.removeEventListener('scroll'); //离开当前组件别忘记移除事件监听哦
- }
- }
2. 方法二:原生js 判断滚动结束代码如下:
- let m1 = 0; // 滚动的值
- let m2 = 0; // 对比时间的值
- let timer = null;
- document.onscroll = function(){
- clearTimeout(timer) // 每次滚动前 清除一次
- timer = setTimeout("Data()", 1000);
- m1 = document.documentElement.scrollTop || document.body.scrollTop;
- }
- function Data(){
- m2 = document.documentElement.scrollTop || document.body.scrollTop;
- if(m2 == m1){
- console.log('滚动结束了')
- }
- }
vue中判断页面滚动开始和结束的更多相关文章
- vue 中判断向上滚动还是向下滚动
<script> export default { data(){ return{ i = 0 } }, mounted () { window.addEventListener('scr ...
- vue 中判断页面滑动方向
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- vue中的页面渲染方案
一.模板渲染 <div id="J_render_app"> <ul v-if="items.length"> <li v-for ...
- vue中嵌套页面 iframe 标签
vue中嵌套iframe,将要嵌套的文件放在static下面: <iframe src="../../../static/bear.html" width="300 ...
- vue中嵌套页面(iframe)
vue中嵌套iframe,将要嵌套的文件放在static下面.(要将打包文件整体放在statici里,我的文件名是canvas) src可以使用相对路径,也可使用服务器根路径http:localhos ...
- vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
- 【MFC】转:在CHtmlView中判断页面加载完成
在列出别人的代码前,记录下自己的,覆盖父类的OnNavigateComplete2函数即可. typedef struct _tagEventURL { CString strUrl; HANDLE ...
- js微信禁用右上角的分享按钮,和vue中微信页面禁用右上角的分享按钮的问题
1.隐藏微信网页右上角的按钮 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { // 通过下面这个 ...
随机推荐
- 目标检测常用库MMCV安装中遇到的问题总结
我看很多教程说mmcv是只支持linux,支持windows版本较少,所以很难和torch.cuda匹配上,所以报错较多难安装.今天试了一下,遇到的和想到的报错问题基本如下: 一.首先是Microso ...
- laravel8安装步骤
网址: https://learnku.com/docs/laravel/8.x/installation/9354 安装: # 安装laravel composer create-project - ...
- ElasticSearch安装 --- windows版
文件下载地址: 链接:https://pan.baidu.com/s/1_Cy_Sy1-vOvsUxliM-EZHQ 提取码:qpcv 定义: Elasticsearch 是一个分布式的搜索和分析引擎 ...
- ArcMap从建库到出图
1前言 本篇博主将介绍关于ArcMap建库.数据采集.拓扑检查.图表.制作符号等的基本操作. 2问题阐述 (1)检查现有block(线要素)图层,保证所有要素闭合,并将其转换为parcel(面要素): ...
- 洛谷P1162—填涂颜色
这应该是是第一次记录洛谷题库里的题目吧: 题目描述 由数字00组成的方阵中,有一任意形状闭合圈,闭合圈由数字11构成,围圈时只走上下左右44个方向.现要求把闭合圈内的所有空间都填写成22.例如:6 \ ...
- 软路由openwrt中替换国内镜像源(以阿里云为例)
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.打开openwrt终端 二.找到distfeeds.conf 进入opkg cd /etc/opkg 查看opkg内文件 ls 可以找到di ...
- 使用 Mosh 来优化 SSH 连接
1.什么是Mosh Mosh表示移动Shell(Mobile Shell),是一个用于从客户端跨互联网连接远程服务器的命令行工具.它能用于SSH连接,但是比Secure Shell功能更多.它是一个类 ...
- CF1500D Tiles for Bathroom (递推+大讨论)
题目大意:给你一个n*n的矩阵,现在问对于每个k\le n,求出所有k*k的子矩阵中,元素种类数不超过q的矩阵个数,n\le 1500, q\le 10 先考虑最暴力的做法: 对于每个格子,求出以它为 ...
- 在Windows环境下构建Lua 入门
在Windows环境下构建Lua 一:准备软件 1.C-compiler(TDM GCC) http://tdm-gcc.tdragon.net/download 2.Lua源代码 http:// ...
- MAVEN setting文件
<?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://mav ...