微信小程序之获取元素距离顶部距离、页面滚动监听

最新推荐文章于 2025-03-19 14:15:53 发布

幽幽靖

最新推荐文章于 2025-03-19 14:15:53 发布

阅读量1.6w

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.csdn.net/ws19900201/article/details/103736330

版权

本文介绍了在微信小程序中如何获取元素距离顶部的距离，并关注页面滚动监听的实现细节。特别提醒注意禁止页面滚动的设置、页面高度的正确写法，以及`scroll-view`中的限制。同时，提供了获取页面宽高的方法，以及相关链接，包括scroll-view高度动态获取、导航栏跟随滚动置顶的实现和小程序筛选功能的教程。

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

获取元素距离顶部距离、页面滚动监听

onReady: function () {
   
    var that = this;
    var query = wx.createSelectorQuery()
    query.select('.lplistbd')

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

幽幽靖

关注关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

scroll-view据顶部距离计算高度

weixin_58500804的博客

09-15

577

scroll-view列表

小程序如何监听页面的滚动事件

TianXuab的博客

09-23

7776

在小程序开发中，监听页面的滚动事件是一个常见的需求。通过监听页面的滚动事件，我们可以实现一些特殊效果，例如懒加载、下拉刷新等。本文将介绍如何在小程序中监听页面的滚动事件，并给出一些实用的示例代码。

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

微信小程序怎么获取标签的距离顶部的高度？？

qq_53244180的博客

11-18

2840

微信小程序怎么获取标签的距离顶部的高度？？

微信小程序之动态获取元素宽高、距离顶部底部的距离

qq_40685439的博客

09-30

9633

一.首先，这个接口会返回一个对象实例。 var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容。返回的 obj 有五个方法： obj.in(component)：没用过这个方法，多用于组件的选择器。 obj.select(selector)：获取指定的节点，selector是css选择器。返回一个 NodesRef 对象实例，可以用于获取节点信息。 obj.selectAll(selector)：获取指定的节点，selector是c

微信小程序检测滚动到某元素位置的计算方法

最新发布

weixin_68658847的博客

03-19

555

微信小程序检测滚动到某元素位置的计算方法

微信小程序获取dom元素距离顶部高度等属性

S筱潇S四维Smile

09-02

1806

微信小程序获取dom元素距离顶部高度等属性

微信小程序获取子组件相对于页面而言距离顶部的距离

肖肖肖丽珠的博客

09-23

1173

res[0].top,//#member节点的距离顶部的距离。">想知道我的高度

uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。

努力、拼搏、奋进

09-17

8216

uniapp——获取某元素距离顶部的距离，并将高度应用到css里面，为实现scroll-view内容而不让整个页面出现滚动条。

小程序获取元素距离顶部的高度

qq_41806475的博客

01-12

2万+

给元素加一个id 然后使用 wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.ri...

微信小程序--特定区域滚动到顶部时固定的方法

10-17

在微信小程序开发中，有时我们需要实现一个功能，即当用户滚动到特定区域时，该区域固定在屏幕顶部，直到用户滚动回原来的位置时再恢复原状。这种效果通常用于导航栏或工具栏，以保持其始终可见。本文将详细介绍如何...

微信小程序之判断页面滚动方向的示例代码

10-18

总结来说，微信小程序通过`wx.createSelectorQuery()`获取页面元素高度，结合`onPageScroll`事件监听用户滚动行为，再通过比较`scrollTop`值的变化来判断页面的滚动方向。这为开发者提供了丰富的交互可能性，帮助...

微信小程序上实现滚动播放等视频相关的效果

08-10

1. **监听滚动事件**：通过`onScroll`事件监听页面的滚动，获取当前可视区域的顶部和底部位置。 2. **计算视频位置**：根据滚动位置和视频的坐标，判断视频是否在可视区域内。 3. **控制播放状态**：如果视频位于...

微信小程序怎么动态获取view的高度以及获取view到页面顶部的距离

热门推荐

PromiseCao的博客

12-01

2万+

首先给你的xml对象一个id： <view class="usermotto" style="height:213px;" id='mjltest'/> 然后在js里，用一个SelectorQuery来选择对应id的节点（注意id前面要加一个#号），就可以获取对应节点的属性，包括高度。 //创建节点选择器 var query = wx.createSelectorQuery(...

onPageScroll小程序获取滚动条滑动距离顶部的距离

sxs7970的博客

11-17

2409

小程序中有onPageScroll()方法可以获取滚动条距离顶部导航的距离 onPageScroll(e){ if(e.scrollTop>10){ this.setData({ isShowTop:true }) }else{ this.setData({ isShowTop:false }) } ...

微信小程序返回顶部及获取滑动距离

小破孩的博客

12-03

6364

获取滑动距离 微信小程序有一个为 onPageScroll 的函数，可以获取到当前滑动屏幕的距离。 onPageScroll: function(res) { console.log(res); }, 滑动距离打印如下：返回顶部 1、先在data里边设置scrollTop:0 2、点击点击返回顶部的方法，如下： //返回顶部 goScrolltop:fu...

微信小程序通过createSelectorQuery获取元素高度，宽度与界面距离

weixin_45966674的博客

10-07

5242

小程序官方有提供给我们一个 const query = wx.createSelectorQuery() 函数。这里我们定义了多块 view 都用行内样式设置了它的高度和宽度。这里就正常的输出了每个元素高度宽度与页面上下左右的距离。这里我们获取了所有类名中包含 textIn 的元素并输出。我们运行代码并点击按钮点击查看。我们可以先编写这样一段代码。

使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能

slom_fxt的博客

03-21

3680

使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能

小程序实时监控距离顶部的距离

weixin_30642869的博客

07-09

1988

onPageScroll: function (ev) { 　　console.log(ev.scrollTop); }, 转载于:https://www.cnblogs.com/hlhs/p/11157699.html

【uniapp】uniapp设置安全区域：

SunPeng的博客

08-11

4185

【uniapp】uniapp设置安全区域：

微信小程序banner控件演示与应用

标题中提到的"微信小程序banner控件"，banner是一种常见的网页元素，通常用于在网页顶部滚动展示重要的广告、通知或者引导信息。在微信小程序中，banner控件的使用可以提升用户体验，有效地吸引用户的注意力，增加...