vue中window.addEventListener(‘scroll‘, xx)失效的解决
目录
- window.addEventListener(‘scroll‘, xx)失效解决
- window.addEventListener scroll在移动端无效问题
window.addEventListener(‘scroll‘, xx)失效解决
多次尝试都无法获取到滚动事件,后来加上true之后就可以了
window.addEventListener('scroll', this.clintHeight, true)
window.addEventListener scroll在移动端无效问题
在vue项目中有一个页面滚动的加载数据的事件,一开始用window.addEventListener scroll在浏览器上调试时可以监听到事件,但是在移动端上无法监听到scroll事件
window.addEventListener('scroll',()=>{ console.log("页面滚动事件") })
既然无法实现监听功能就干脆把监听事件绑定到dom元素上
<template> <div id="pageId"> </div> </template>
<script> mounted(){ let page = document.getElementById('pageId'); page.addEventListener('scroll', this.pageScroll,true) }, methods:{ pageScroll(){ console.log("scroll") } } </script>
<style> #pageId{ height:100vh; overflow-y:scroll } </style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue中添加滚动事件设置的方法详解
一.问题发现 在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件, 经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件. <div @scroll='showOut'></div> 二.原因分析 暂无 三.解决办法 1.直接利用mousewheel事件替代scroll事件 <div @mousewheel='showOut'></div> mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是
-
使用vue.js在页面内组件监听scroll事件的方法
思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表
-
vue监听滚动事件的方法
vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 } 处理方法 1. 滚动到顶部吸附 html元素 <!--如果isFixed为true的话,就添加class is_
-
vue中window.addEventListener(‘scroll‘, xx)失效的解决
目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效
-
swiper在vue项目中loop循环轮播失效的解决方法
长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop.observer.observeParents等参数还是很诡异的无法循环轮播: 那么可以这样写代码试试: this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"){ this.swiperImgs = resp.data.data; this.$nextTick
-
在vue中使用el-tab-pane v-show/v-if无效的解决
我就废话不多说了,大家还是直接看代码吧~ 解决方法如下: <template> <el-tabs v-model="settype" @tab-click="tabClick" ref="tabs"> <el-tab-pane label="广告位设置" name="bannerset">广告位设置</el-tab-pane> <el-tab-pane
-
vue中element组件样式修改无效的解决方法
如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st
-
Vue中android4.4不兼容问题的解决方法
1.npm安装 npm install babel-polyfill npm install es6-promise package.json中会出现 "babel-polyfill": "^6.26.0", "es6-promise": "^4.1.1", 2.main.js引入 import 'babel-polyfill' import Vue from 'vue' import Es6Promise from 'es6
-
swiper在angularjs中使用循环轮播失效的解决方法
bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类
-
vue在mounted中window.onresize不生效问题及解决
目录 mounted中window.onresize不生效 解决方案 window.onresize被覆盖问题 解决方案 mounted中window.onresize不生效 在vue开发中,因为引用的父组件和子组件都使用了window.onresize以至于一个window.onresize失效. 解决方案 可以采用下面的方式 window.onresize = () => this.screenWidth = window.innerWidth // 改为以下写法 window.addEv
-
vue中的addEventListener和removeEventListener用法说明
目录 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 2.移出监听事件(removeEventListener) 使用addEventListener添加事件.removeEventListener移除事件 添加事件 移除事件 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 语法:element.addEventListe
-
vue中window.onresize的使用解析
目录 window.onresize的使用 说下重点 window.onresize笔记 1.浏览器尺寸变化响应事件 2.谷歌浏览器中 3.页面尺寸变更事件 window.onresize的使用 说下重点 window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况,所以我的解决方案是在App.vue中使用,获取document.documentElement.clientWidth(即浏览器宽度)存放在vuex中,别的组件只需要用computed(计算属性)将vuex的
-
关于vue中使用three.js报错的解决方法
目录 前言 1.vue的问题? 2.Proxy的异常情况 3.Three.js的问题 4.defineProperty异常情况 5.解决 总结 前言 最近在学习three.js,同时也学习一下vue3,然后就出现问题了,报错直接用不了,错误信息如下: Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the prox
随机推荐
- js遍历、动态的添加数据的小例子
- mssql使用存储过程破解sa密码
- JavaScript窗口功能指南之在窗口中书写内容
- ASP.NET使用正则表达式屏蔽垃圾信息
- asp下几种常用排序算法
- MySql登陆密码忘记及忘记密码的解决方案
- JavaScript给url网址进行encode编码的方法
- word-wrap
- 音乐播放用的的几个函数
- JQuery中使用.each()遍历元素学习笔记
- ASP.NET:设置页面buffer引出来的问题
- Android中自定义一个View的方法详解
- 在winform下实现左右布局多窗口界面的方法之续篇
- Python实现一个Git日志统计分析的小工具
- 基于vue开发的在线付费课程应用过程
- iPhoneX 各种适配记录笔记(超全面)
- wamp中mysql安装时能启动重启后无法启动的解决办法
- 对PyQt5的输入对话框使用(QInputDialog)详解
- 一个手写的vue放大镜效果
- Spring Boot 整合 Shiro+Thymeleaf过程解析