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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue监听滚动事件的方法

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 } 处理方法 1. 滚动到顶部吸附 html元素 <!--如果isFixed为true的话,就添加class is_

  • 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中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用法说明

    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报错的解决方法

    关于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

随机推荐