5分钟掌握微信小程序 IntersectionObserver

于 2024-03-29 01:55:27 发布
阅读量1k 收藏 27
点赞数 26
分类专栏： 程序员 文章标签： 微信小程序 notepad++ 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83704159/article/details/137129235
版权
本文介绍了如何使用IntersectionObserver在微信小程序中监测元素与参考区域的相交情况，包括设置参考区域、监听和取消监听，以及提供了一个简单的代码示例。详细解释了thresholds、initialRatio和observeAll等选项，并给出了实际应用中的相交比例和边界信息。此外，文章还分享了作者的前端开发经验和资源，供学习者参考。
摘要由CSDN通过智能技术生成

  • 设置参考区域

  • 监听

  • 取消监听

  • 简单示例

    • 代码

  • 结果分析

  • 注意事项

简介

=====================================================================

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见，用通俗的语言来说就是用于监测目标对象与某个参照物的相交情况。

API

======================================================================

IntersectionObserver 微信官方文档

创建

（1）wx.createIntersectionObserver(Object component, Object options)

（2）在组件内部使用 this.createIntersectionObserver([options])

Obje

最低0.47元/天 解锁文章
2401_83704159
关注
  • 26
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记录微信小程序createIntersectionObserver()方法的使用
qq_40236628的博客
10-12 4986
记录微信小程序createIntersectionObserver()方法的使用
微信小程序开发笔记4—— IntersectionObserver 用法详解
热门推荐
袁杰Jerry
11-03 2万+
看微信文档时看到这个很有趣的api，但是官方的文档和例子关于这个api的介绍都是很让人失望的，所以花了点时间了解了以下这个方法，做个记录，供参考。 简介 首先，我的理解是，这是一个观察器（废话），它用来监测目标对象与某个参照物的相交情况。什么是相交情况？通俗的说，就是两个区域有重叠（公共区域）了，类似与数学中的交集，不过这个是平面上的。 我们用官方给的一个简单的例子进行讲解：https://dev...
浅谈微信小程序列表埋点曝光指南
10-16
总的来说，微信小程序列表埋点曝光通过IntersectionObserver API实现了更智能、更高效的事件触发，它简化了开发者的工作，同时提供了更加准确的用户行为数据，对于提高小程序的性能和用户体验具有显著的作用。...
微信小程序组件集合图片上传裁剪上划刷新图片懒加载
08-10
微信小程序虽然没有内置的懒加载机制，但开发者可以利用`IntersectionObserver`接口或自定义事件来监听图片是否进入视口，从而决定何时加载图片。这种方式能显著减少首屏加载时间，提升页面性能。 6. **JavaScript...
微信小程序 WXML节点信息查询详解
10-16
在微信小程序开发中，WXML节点信息查询是至关重要的功能，它允许开发者获取和操作界面元素的状态和属性。本文将详细讲解如何进行WXML节点信息的查询...理解并熟练掌握这些API，对于提升微信小程序的用户体验至关重要。
intersectionObserver
weixin_41644419的博客
08-21 424
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
小程序节点监视IntersectionObserver
MR.杜的博客
12-17 235
【代码】小程序节点监视IntersectionObserver。
uniapp在小程序中使用createIntersectionObserver的问题
最新发布
yangxun9264986的博客
03-01 1597
在小程序开发中，使用这个Api来实现埋点的数据上报，基本是相当精准的，而且不会对性能造成影响。
微信小程序如何利用createIntersectionObserver实现图片懒加载
weixin_71893790的博客
12-18 1953
微信小程序如何利用createIntersectionObserver实现图片懒加载
IntersectionObserver实现小程序长列表优化
这魏先森-forguo
07-29 1021
IntersectionObserver实现小程序长列表优化 通过 小程序api，IntersectionObserver实现小程序的长列表优化
小程序IntersectionObserver用法
薛定喵君的博客
08-05 2223
做锡慧在线小程序课程详情页时需要在页面向下滚动的时候显示吸顶锚点菜单,记一下IntersectionObserver的用法 1.显示时机暂定为课程信息移出屏幕的时刻 2.代码如下: js this._observer = wx.createIntersectionObserver(this); this._observer.relativeTo('.jump-list').observe('.co...
微信小程序开发笔记5—— IntersectionObserver应用之实现元素随着页面滚动吸附在顶部的效果
袁杰Jerry
11-03 4790
本文主要介绍了两种方法来实现某元素随着页面的滚动，吸附在顶部的效果。一个是使用上一片博客所说的 IntersectionObserver ，一个是使用page的onPageScroll监听函数。欢迎围观。
taro3 微信小程序 createIntersectionObserver 监听无效
hanchengmei的博客
07-13 2124
项目： taro3 + vue3。
微信小程序开发---使用IntersectionObserver实现懒加载
qq_41756580的博客
12-02 1609
微信小程序提供了一个很好用的api，IntersectionObserver 对象，监听目标元素与其祖先或视窗交叉状态的手段。 其实现原理在于监听目标元素与参照区域相交（参照区域可以为页面显示区域、指定一个元素节点）； 这里实现懒加载的原理就是如此，监听需要加载的图片，给图片数组添加一个showState：false的字段，当使用IntersectionObserver 监听到图片进入参照区域...
【微信小程序】联动菜单（左右侧菜单）实现
xiaobaizaza_Ry的博客
05-17 4097
联动菜单（左右侧菜单）实现【微信小程序】 最近为了实现课程设计，也做了一些前端的东西，今天想要做一个联动菜单来实现一些功能。实现了，也来做做笔记。 第1步：了解一下 左右侧菜单其实简单来讲就是把一个区域分成左右两个部分。关于组件，我觉得可以直接去微信开发文档看。通过代码，我觉得应该是可以理解的。话步多讲，直接上代码。（首先说明一点的是，我还是个刚刚接触前端的小白，可能有些写得不太好得，往各位博友多多指出改进得建议，相互学习） 第2步：实现（代码我有注释） 在这里插入代码片 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值