uniapp onPageScroll监听事件为啥不起作用

最新推荐文章于 2024-04-23 11:46:37 发布
最新推荐文章于 2024-04-23 11:46:37 发布
阅读量9.7k 收藏 7
点赞数 13
分类专栏： uniapp 解决bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIXIAONA_1101/article/details/115367081
版权

细心的朋友会发现onPageScroll事件不是很敏感又或者根本不起作用

因为你主体内容的高度没有超过浏览器的内容高度，没有形成页面的上下滚动，所以就没有页面的onPageScroll

解决：height:100vh改为min-height:100vh

又或者你想监听的页面上就放了一个滚动组件scroll-view，那么可以使用@scroll来实现监听的功能

官网链接

结构体&
关注
  • 13
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
uniapp如何监听页面滚动
cccbbbmmm的博客
12-08 6297
2.使用组件的事件监听： 如果你的页面中包含有滚动的组件（例如scroll-view），你可以使用组件的事件监听来监听页面滚动事件。具体的事件名称和使用方法可以参考对应组件的官方文档。在UniApp中，你可以使用页面生命周期函数和组件的事件监听来监听页面滚动。以上是两种常用的监听页面滚动的方法，请根据你的具体需求选择适合的方式进行实现。
uniapp - 回到顶部 onPageScroll
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-10 2574
onPageScroll：监听滚动事件 回到顶部： uni.pageScrollTo({ scrollTop:0 }) <template> <view> <!-- 回到顶部按钮 --> <view class="btn-gotop" @click="goTop" v-show="showBtn"> <uni-icons type="arrowthinup" col...
uniapp 页面滚动到指定位置的方法
最新发布
--=
04-23 1643
uniapp 页面滚动到指定位置的方法
uni-app:onPageScroll没有调用
爱写代码的猴子的博客
04-01 3142
onPageScroll页面生命周期函数能够触发，出现这个原因是因为页面的主体内容没有超过浏览器的内容高度，这样会导致页面无法滚动，所以onPageScroll这个函数不会触发，那么我们可以把heght：100vh改成min-height:100vh，这样onPageScroll函数就可以触发了，但是这样会导致页面滚动到某个位置，就不能继续滚动了（本项目是套壳，不知道是不是套壳的原因，请大神指点一下）（记录一下自己的成长经历，大神轻喷）
uniapp监听页面滚动以及子组件上拉加载
12-18 1655
组件，通过调用方法，监听页面滚动事件。页面，通过生命周期函数。页面，通过生命周期函数。
uniapp 实现一键到顶和一键刷新功能
q759859479的博客
03-31 1944
思路方法：封装一个组件，两个按钮：一键到顶和一键刷新按钮。在父页面引用组件，然后在父页面的onPageScroll事件中监听滚动高度，控制组件显隐。页面向下滑动到一定距离时显示按钮，点击按钮可以一键到底，一键刷新，向上滑动到一定距离时按钮消失。selector类似于 CSS 的选择器，但仅支持下列语法。核心功能：利用uniapp的onPageScroll。将页面滚动到目标位置。
uni-app 监听页面滚动（页面或组件）
热门推荐
PrimaryColor
07-23 1万+
如果是页面，存放在“pages”下的文件,通过生命周期函数： onPageScroll(res) { console.log("页面滚动了") uni.$emit('onPageScroll', res.scrollTop); }, 如果是组件，存放在“components”下的文件，通过调用方法，监听页面滚动事件，代码： mounted() { var that = this; uni.$on('onPag
Android在Fragment中实现监听触摸事件
01-05
本文给大家介绍的是监听Fragment的触摸事件实现。如果大家有更好的机制，可以留言交流，下面来看看详细的介绍： 大家都知道，我们的activity中有onTouchEvent方法，可以用来实现触摸事件的监听。 activity的触摸事件...
Html5 APP中监听返回事件处理的方法示例
09-27
然而，如果在不同页面或Webview中混合使用了`location.href`和Webview的创建，可能会导致所有自定义的`mui.back`函数被入口文件的监听事件捕获，使得其他页面的自定义行为无法生效。 为了避免这种情况，最佳实践是...
安卓（Android） 监听按键长按事件
09-02
本文主要介绍Android 中监听按键的长按事件,对按键机制进行详解,并附有代码实例,具有参考价值,希望能帮到有需要的小伙伴
flutter 中监听滑动事件
01-05
在移动端，各个平台或 UI 系统的原始指针事件模型基本都是一致，即：一次完整的事件分为三个阶段：手指按下、手指移动、和手指抬起，而更高级别的手势（如点击、双击、拖动等）都是基于这些原始事件的。 Flutter 中...
uniapp页面回到顶部方法
topuu的博客
02-21 6989
uniapp页面回顶
uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度
肖帅的博客
03-10 2701
uniapp项目使用onReachBottom函数实现请求下一页数据，使用onPageScroll函数获取页面滚动条的滚动高度 一，需求：如下图所示，当滚动条滚动到一定位置时要将红色框内的内容放到最顶部并且位置固定。 二，实现内容： ①需要获取滚动高度 ②滚动条触底时可请求下一页的数据 图片位置固定 三，代码实现 可使用uni app提供的页面生命周期方法onReachBottom和onPageScroll实现 在onPageScroll 函数中，e.scrollTop可获取页面滚动高度 使用onRe
uni-app:onPageScroll未触发 问题记录
柑橘乌云_
04-13 3076
u-back-top 不生效 场景: uniapp开发微信小程序，页面最外层的div高度给了个100%，这个时候，在onPageScroll事件函数中打印e.scrollTop，发现并未触发该函数。这样子就好啦，还是基本功不扎实0.0。
uniapp页面滚动监听
m0_67401382的博客
03-01 2839
先在前面总结下，下面一共有3种监听滚动的方法。 昨天在做uniapp的图片懒加载，从网上找了个插件，导入到HBuilderX后，捣鼓了一晚上，总算是正常跑起来了。 今天早上，把代码copy到项目上，结果只有第一屏的图片能展示，滑动后，下面的图片都不显示了！-_-! 因为有了昨晚的经验，很快就定位到问题是滚动监听出现了问题。 这个插件的图片懒加载一个关键的地方就是用到滚动监听。 第一种 在普通页面可以用生命周期的“onPageScroll”方法，如下： onPageScroll(e) { // 传入scro
uniapp 消息列表进入详情后页面返回时保存当前位置——onPageScroll的用法
yehaocheng520的博客
11-23 5914
消息列表记录当前页面位置 消息列表如上图所示，右侧红点代表消息未读。 点击消息进行详情后，然后返回到消息列表中时，需要重新刷新页面，将未读消息转变为已读消息。然后还需要将页面直接定位到之前的位置。 返回到当前页面然后刷新，这个应该是onShow中的方法。在onShow中进行接口的调用，将数据更新，然后页面位置的问题，可以通过onPageScroll的方法来处理。 1.监听页面的滚动 // scrollTop是data中定义的变量，可以将页面的滚动值赋值保存下来。 onPageScroll(e) { th
uni-app监听页面滚动
weixin_59525879的博客
09-16 2373
在uni-app中可以通过监听页面滚动事件来实现滚动效果或响应滚动事件。
uniapp onPageScroll监听页面滚动不起作用？解决方案
chenrui310的博客
08-17 4383
uniapp onPageScroll监听页面滚动不起作用？解决方案 微信小程序 页面滚动头部显示隐藏 VUE 监听 对象属性值变化的三种方式
UNI-APP_监听页面滚动h5监听页面滚动
小歪博客
08-08 1601
1.在uniapp中，使用生命周期onPageScroll()2.在普通h5页面中使用原生js进行监听。
uniapp监听顶部
08-19
你可以使用 `uni-app` 的生命周期函数 `onPageScroll` 来监听页面滚动事件，从而实现监听顶部的效果。在页面的 `methods` 中添加以下代码： ```javascript onPageScroll(e) { // 监听页面滚动事件 // e.scrollTop 表示页面滚动的距离 if (e.scrollTop > 0) { // 页面已经向下滚动，执行相应操作 console.log('页面已经向下滚动'); } else { // 页面回到顶部，执行相应操作 console.log('页面回到顶部'); } }, ``` 当页面滚动时，`onPageScroll` 函数会被触发，`e.scrollTop` 表示页面滚动的距离。通过判断 `e.scrollTop` 的值，可以实现监听顶部的效果。在控制台输出的信息可以根据实际需求进行替换或修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值