关于uniapp中使用onPageScroll监听滚动失效

最新推荐文章于 2024-07-13 12:53:52 发布

三浪.

最新推荐文章于 2024-07-13 12:53:52 发布

阅读量1.6k

点赞数

分类专栏：需求解决文章标签： uni-app javascript html

本文链接：https://blog.csdn.net/weixin_42947972/article/details/130651694

版权

需求解决专栏收录该内容

16 篇文章 0 订阅

订阅专栏

关于uniapp中使用onPageScroll监听滚动失效

一般现在百度到的问题都是:

高度没有超出
没有设置滚动条出现

如果这两件都排除了…可能和我遇到的一样原因:
在pages.json文件使用了"disableScroll": true,

例子:

{
	"path": "pages/home/index",
	"style": {
		"navigationBarTitleText": "test",
		"disableScroll": true,
		"enablePullDownRefresh": false
	}
},

当初使用这个是为了固定页面…后面没用删除导致出现onPageScroll监听滚动失效

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

三浪.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
关于uniapp中使用onPageScroll监听滚动失效

如果这两件都排除了…在pages.json文件使用了。
复制链接

扫一扫

专栏目录

uni-app页面滚动监听onPageScroll时延迟渲染

Channingz的博客

06-10

7055

uni-app页面滚动监听onPageScroll时延迟渲染进行uni-app开发wx小程序时，测试那边遇到了一个情况。页面有概率拉到最顶端的时候本应判断scrolltop<100的情况下导航条消失，但是小概率会发现置顶时仍带有透明度。根据手机配置，越老的手机出现的概率越高（测试机那么渣所以一测就测出来了嘛QAQ） // 原代码 onPageScroll(res) { //获取距离顶部距离 const scrollTop = res.scrollTop; // 获取屏幕宽高 c

全面解析Bootstrap中scrollspy（滚动监听）的使用方法

09-02

Scrollspy通过监听滚动事件，实时更新导航菜单中的激活状态，从而提供用户更好的浏览体验。接下来，我们将深入探讨如何使用Bootstrap的Scrollspy以及它的内部工作原理。 **使用方法** 1. **基本结构**：要使用...

1 条评论您还未登录，请先登录后发表或查看评论

uni-app中onPageScroll监听不起作用

yangyanqin2545的博客

05-18

905

uni-app中onPageScroll监听不起作用

uniapp内置组件scroll-view案例解析

最新发布

Python私教

07-13

937

参考资料文档地址：https://uniapp.dcloud.net.cn/component/scroll-view.html 官方给的完整代码 <script> export default { data() { return { scrollTop: 0, old: { scrollTop: 0 } } }, methods: { upper: function(e) { console.log(e) },

uni-app:onPageScroll没有调用

爱写代码的猴子的博客

04-01

3459

onPageScroll页面生命周期函数能够触发，出现这个原因是因为页面的主体内容没有超过浏览器的内容高度，这样会导致页面无法滚动，所以onPageScroll这个函数不会触发，那么我们可以把heght：100vh改成min-height:100vh，这样onPageScroll函数就可以触发了，但是这样会导致页面滚动到某个位置，就不能继续滚动了（本项目是套壳，不知道是不是套壳的原因，请大神指点一下）（记录一下自己的成长经历，大神轻喷）

uniapp onPageScroll监听页面滚动不起作用？解决方案

chenrui310的博客

08-17

4455

uniapp onPageScroll监听页面滚动不起作用？解决方案微信小程序页面滚动头部显示隐藏 VUE 监听对象属性值变化的三种方式

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

LIXIAONA_1101的博客

04-01

9882

细心的朋友会发现onPageScroll事件不是很敏感又或者根本不起作用 因为你主体内容的高度没有超过浏览器的内容高度，没有形成页面的上下滚动，所以就没有页面的onPageScroll 解决：height:100vh改为min-height:100vh 又或者你想监听的页面上就放了一个滚动组件scroll-view，那么可以使用@scroll来实现监听的功能官网链接 ...

uni-app:onPageScroll未触发问题记录

柑橘乌云_

04-13

3303

u-back-top 不生效场景: uniapp开发微信小程序，页面最外层的div高度给了个100%，这个时候，在onPageScroll事件函数中打印e.scrollTop，发现并未触发该函数。这样子就好啦，还是基本功不扎实0.0。

uni-app微信小程序onPageScroll事件中使用节流函数无效解决方案

CSDN for recording problems

06-20

3816

最近做一个微信小程序图片懒加载的方法，在onPageScroll事件中直接添加了节流函数并执行，但是并没有节流，一顿检查测试节流函数和自己需要节流的函数都是没有问题，居然在节流函数中没有走return函数，因此没有调用成功，开始时这么写的，按照普通正常的操作：节流函数： export function throttle(fn, gaptime) { if (gaptime == null || gaptime == undefined) { gaptime = 200 } let _last.

Springboot项目监听器失效问题解决

08-24

主要介绍了Springboot项目监听器失效问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

Vue监听滚动实现锚点定位(双向)示例

10-16

开发者可以在组件中使用Vue的生命周期钩子和方法来监听滚动事件，并在事件触发时获取滚动位置，然后根据位置信息决定如何更新页面上的导航或内容显示。接下来，根据提供的文档内容，我们可以提取出实现Vue监听滚动...

JS监听滚动和id自动定位滚动

10-17

需要注意的是，在Vue中，如果在计算属性或watch中使用this.$nextTick，可能会遇到this指向问题。为了解决这个问题，应当确保正确地引用this或使用箭头函数来保持上下文。以上就是文档中介绍的关于JavaScript监听...

vue监听滚动事件实现滚动监听

11-26

在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...

uniapp子组件onReachBottom、onPageScroll不触发

weixin_44294359的博客

01-18

1829

uniapp子组件onReachBottom不触发

uniapp scroll-view 设置scrollTop无效

peachban的博客

11-03

2122

在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）

uniapp解决scroll-view滑动事件失效问题@scrolltolower

明耀的博客

05-04

5061

uniapp解决scroll-view滑动事件失效问题@scrolltolower 1、首先scroller-view需要给定高度，这里的高度最好不要是width：num%这种类型的，很容易不生效。 2、父容器最好也指定高度下面通过举例来说明 <template> <view class="main"> <scroll-view class="scroll-content" scroll-y @scrolltolower="reachBottom">

《微信小程序案例12》＜scroll-view＞组件里面不能使用onPageScroll函数获取滑动距离的解决方法

每天八杯水的博客

09-24

1597

【代码】《微信小程序案例12》＜scroll-view＞组件里面不能使用onPageScroll函数获取滑动距离的解决方法。

uniapp 小程序滚动条遇到的坑

wuawa的博客

04-05

2264

uniapp 滚动条与最高级图层的坑在主页面中使用滚动条，当更高图层覆盖页面时，出现滚动条的时候，我们滑动最高级图层的滚动条，其实主页面的滚动条也跟着滑动（最高级图层滚动条滑到顶部，退出最高级图层时，主页面的滚动条也在最顶部），解决方法也很简单，只需要监听滚动条的位置即可，uniapp中有onPageScroll(e)这个方法实时监听滚动条的位置，我们只需在展开最高级图层的时候记录一次，把它赋值到另一个变量，然后在关闭最高级图层的时候把它赋值回去即可，上代码 //监听滚动条的位置 onPageScroll

uni-app中在模拟器上内容可以滚动，真机上失效问题解决

yangyanqin2545的博客

01-11

985

1、刚刚开始使用的是view组件，给定了高度，超出部分y轴滚动，微信小程序模拟器上面一直为正常。2、为了适配真机，在view组件外边套用了scroll-view,利用该组件中的组件配置滚动。

onPageScroll 监听不到滚动高度

07-16

你好！关于 onPageScroll 监听不到滚动高度的问题，可能有几个原因导致这种情况发生。首先，确保你已经正确地绑定了 onPageScroll 监听器。在你的代码中，应该有类似于以下的代码： ```javascript Page({ onPageScroll: function(e) { console.log(e.scrollTop) } }) ``` 确保你的 onPageScroll 监听器函数被正确调用，并且没有其他代码阻止它执行。你可以在函数中加入一些调试语句，例如 console.log，来确保监听器被正确触发。其次，如果监听器仍然无法获取滚动高度，可能是因为你的页面没有滚动。请确保你的页面内容超出了视窗高度，以便可以发生滚动。你可以尝试添加一些内容或者设置一些样式来使页面出现滚动条。最后，如果以上方法都不起作用，可能是因为你的监听器没有被正确绑定。你可以尝试重新检查你的代码，并确保 onPageScroll 监听器正确地绑定到了页面上。希望这些解决方案能够帮助你解决问题！如果还有其他问题，请随时提问。