微信小程序监听scroll滚动事件结束

最新推荐文章于 2024-07-16 17:54:18 发布
最新推荐文章于 2024-07-16 17:54:18 发布
阅读量4.3k 收藏 1
点赞数 1
文章标签： javascript 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lichenying/article/details/106666118
版权
本文介绍了如何在微信小程序中利用定时器监听scroll滚动事件结束，通过在scroll-view标签上绑定相关事件来达到目的。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微信小程序监听scroll滚动事件结束

代码如下

利用定时器监听来实现这个功能

// An highlighted block
scroll:function (e) {
   

        let _this =this;
 
        if (this.scrollEndTimer) {
   
            clearTimeout(this
最低0.47元/天 解锁文章
Durian.
关注
微信小程序 监听页面滚动和结束滚动
weixin_45614470的博客
10-12 1711
先了解 js的节流和防抖函数 /*函数节流*/ function throttle(fn, interval) { var enterTime = 0;//触发的时间 var gapTime = interval || 300;//间隔时间，如果interval不传，则默认300ms return function () { var context = this; var backTime = new Date();//第一次函数return即触发的时
微信小程序-监听滚动，改变导航样式，点击导航，定位到页面相应为止
weixin_45468589的博客
05-09 653
通过block,判断是否点击了导航，如果点击则延时加载滚动。
微信小程序 防抖
lzc147258的博客
09-13 245
创建 代码 /*函数节流*/ function throttle(fn, interval) { var enterTime = 0;//触发的时间 var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms return function() { var context = this; var backTime = new Date();//第一次函数return即触发的时间 if (backTim.
判断scrollView滚动结束
04-21
重写scrollView的onTouchEvent事件，在MotionEvent.ACTION_CANCEL和MotionEvent.ACTION_UP中通过反射获取scrollview中的OverScroller，然后获取OverScroller的状态判断scrollview是否结束滚动
scroll-view判断滚动停止
Carina的编程技术博客
10-28 1367
用bindscroll事件，主要用到了定时器，下面为例子： data里声明scrollTimer:'', bindscroll(){ clearTimeout(this.data.scrollTimer); this.data.scrollTimer = setTimeout(function () { this.getHeight(); // 放需要做的东西 console.log('我检测到了停止触摸discussScroll') d
微信小程序 在bindscroll事件中监听scroll-view滚动到底
weixin_45966674的博客
10-10 4527
scroll-view其实提供了一个 bindscrolltolower 事件 这个事件的作用是直接监听scroll-view滚动到底部。但 bindscrolltolower 只会判断 是否到了当前scroll-view最底部 而无法动态拒绝某块元素参与。然后 我们在 bindscroll="bindscrolltolower"中直接这样写。首先 我们要给自己的scroll-view加一个id 方便我们去那这块元素。所以 我们只能寄希望于 bindscroll。但是 总有不太一样的情况。
微信小程序 scroll-view禁止滚动
weixin_40938312的博客
08-12 1万+
我用的很简单的方法 在scroll-y=“{{gun}}” 然后需要的地方设置true或false 最后判断 this.setData({gun:false})//bu rang gun dong this.setData({gun:true})//kai qi gun dong <scroll-view scroll-y="{{gun}}" bindscrolltolower=...
微信小程序——scroll 滚动 滚动事件
qq_41141657的博客
02-21 5850
** scroll-view ** 1）&lt;scroll-view&gt;&lt;/scroll-view&gt; 滚动框架 2） &lt;scroll-view &gt; &lt;view id='one' class='scroll-view-item bc_green'&gt;&lt;/view&gt; &lt;view id='two' class='scroll-view-item ...
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
今日准备把微信小程序的下拉刷新做一下，没想到我绑定了bindscrolltolower事件，但是居然不触发,我设置了lower-threshold高度无济于事.最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我...
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
ScrollView快速滑动或拖拽停止事件监听
SwmIsMe的博客
11-13 7497
解决思路： 设立onKeyUp的监听，在手指离开屏幕后用 handler.sendMessageDelayed(handler.obtainMessage(1), 200)每隔200毫秒getScrollY()一次，然后比较getScrollY()的值直到与上次得到的相等时就是scrollview停止滑动了。 办法： 在 ScrollView的 setOnTouchListener
Unity判断Scroll View是否停止滑动
qq_59387760的博客
07-16 776
ScrollRect有一个velocity的值，我们启用一个协程，每隔指定时间检测它的值，当它的值小于我们设置的阈值时，就可以认为它是停下来了，但是这时速度一直都是小于阈值的，他会一直执行在停止之后的逻辑，而我们希望实现当它停止下来之后，只执行一遍我们需要执行的方法，就不执行了，所以我们实现IEndDragHandler接口，当拖拽结束之后，将carryOut的值设置为为true，表示可以继续执行方法，当执行方法之后，再设置为false，表示不可以执行方法。
检测ScrollView开始停止滑动的方案
litefish的专栏
08-17 5657
检测ScrollView开始停止滑动的方案旧方案如何检测scrollview的滑动开始和滑动停止，滑动开始可以用 onScrollChange来判断，那么停止呢。 一开始的时候我是判断200ms内，scrollY是否改变，如果未改变就判断为停止了，核心代码如下。工程名为DetectScrollStop。但是这样不优雅，有没有更好的方法呢？ detector = new Scroll
微信小程序：scroll-view组件滑动多次触发scroll事件的bug解决
小熊的博客
07-23 1万+
在项目开发过程中，组件是微信小程序提供给我们的一个分页器，一般滑动到底部时会触发scroll事件，scroll事件中往往包含对后端数据的请求；若是还未滑动到底部时频繁触发事件，则会频繁发请求，达不到想到的分页效果。 先来说说的用法 &lt;scroll-view scroll-y="true" style="height:{containerHeight}px" lower-threshold...
uniapp监控触摸事件结束
Sport_18的博客
03-07 3684
最近在uniapp组件中需要监听页面触摸结束的事件，但是框架只提供触摸开始的事件，百度借鉴后完成需求，特此记录，欢迎网友指正和提出不同方案。 1.先监听触摸开始事件，如果是页面可以直接调用“onPageScroll”这个生命周期。如果是组件可以使用“scroll-view”的“@scroll”方法，以这种方法为例： <scroll-view scroll-y="true" scroll-...
微信小程序监听页面滚动的事件
热门推荐
沉默的小猴子的博客
04-13 2万+
有些用户的需求是，上下滑动屏幕要求隐藏掉某些显示区域。或者滑动到指定位置时显示某些内容。 可做监听事件四个： 一、JS自带的： //开始滚动 onPageScroll (e) { console.log('滚起来') }, 这个监听的不够灵敏，BUg较多。 二 、手势事件 <view class="wrapIndex" bindtouchstart="touchStart" ...
使用scrollIntoView实现文章回到顶点
qq_45319443的博客
09-08 465
<!--点击回到顶点--> <div id=#to-header></div> <div class='anchor-point' @click='returnTop' style=" position: absolute; left: 95%; bottom: 20px; background-color: rgb(22, 108, 248); width: 30px; height: 30px; .
微信小程序scroll-view 实现锚点定位，滑动标题变化，点击标题变化
weixin_44936767的博客
04-14 2494
话不多说上效果 源码连接
微信小程序-监听屏幕滚动
m0_74265396的博客
07-29 1305
运用页面Page()函数中的onPageScroll方法，来监听屏幕滚动的距离。
HB开发微信小程序监听页面滚动的事件
最新发布
10-29
在HBuilder中开发微信小程序，如果想要监听页面的滚动事件，可以使用wx.requestAnimationFrame函数配合scroll-view组件的bindscrolltolower和bindscrolltopchange事件。这两个事件会在滚动到底部和滚动位置改变时触发。 1. 首先，在需要监听滚动的`<scroll-view>`标签上设置相应的事件处理器： ```html <scroll-view bindscrolltolower="onScrollToLower" bindscrolltopchange="onScrollTopChange"> <!-- 页面内容 --> </scroll-view> ``` 2. 然后在对应的WXML文件中的JS部分编写事件处理函数，如： ```javascript Page({ data: { // 其他数据 }, onScrollToLower: function(e) { console.log('滚动到底部'); // 在这里添加你的底部操作逻辑 }, onScrollTopChange: function(e) { var scrollTop = e.detail.scrollTop; // 获取滚动距离 console.log('当前滚动位置', scrollTop); // 在这里添加滚动位置变化的操作逻辑 } }) ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值