小程序中监听页面滚动的几种方法实例

目录
  • 目录
  • 实现效果
  • 下面是Intersection Observer在MDN上的介绍
  • IntersectionObserver
    • relativeToViewport
      • 接受参数 Object margins
    • observe(string targetSelector, function callback)
      • 参数
      • Object res
  • 小程序中监听页面的其他方法
    • page-meta
    • scroll-view
  • 总结

在工作中我们经常遇到需要监听页面中元素位置，当元素超出显示区域或即将显示到页面上，我们就可以做一些动画或者操作。最常见的操作比如预加载，懒加载，TAB滚动跟随。

目录

  • Intersection Observer 在MDN上的介绍
  • 小程序中 IntersectionObserver 的使用

实现效果

在浏览器的情况下，我们可以使用 Intersection Observer

下面是Intersection Observer在MDN上的介绍

MDN链接

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦IntersectionObserver被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

简单来说，就是我们能不能看到想要观察的对象。

在网页中，我们很容易就可以用实现Intersection Observer，而在小程序中，我们需要再多掌握一点知识。

IntersectionObserver

小程序中IntersectionObserver的文档地址

IntersectionObserver 对象，用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见。

relativeToViewport

指定页面显示区域作为参照区域之一

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect.top // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }
})

接受参数 Object margins

用来扩展（或收缩）参照节点布局区域的边界

属性 类型 默认值 必填 说明
left number   否 节点布局区域的左边界
right number   否 节点布局区域的右边界
top number   否 节点布局区域的上边界
bottom number   否 节点布局区域的下边界

observe(string targetSelector, function callback)

参数

(targetSelector:string，callback:function)

Object res

属性 类型 说明
id string 节点 ID
dataset Record.<string, any> 节点自定义数据属性
intersectionRatio number 相交比例
intersectionRect Object 相交区域的边界
boundingClientRect Object 目标边界
relativeRect Object 参照区域的边界
time number 相交检测时的时间戳

小程序中监听页面的其他方法

page-meta

页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。

scroll-view

可滚动视图区域。使用竖向滚动时，需要给 scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px。

总结

在小程序中，我们可以用 IntersectionObserver ，来监听页面的元素与页面交叉的距离，如此一来我们便可以在小程序中实现懒加载，预加载，动画等效果。

我们也可以用 page-meta 和 scroll-view 来实现滚动监听，具体需要结合实际场景。

到此这篇关于小程序中监听页面滚动的几种方法的文章就介绍到这了,更多相关小程序监听页面滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序弹窗禁止页面滚动的实现代码

    微信小程序弹窗禁止页面滚动的实现代码

    下面给大家介绍下小程序弹窗禁止页面滚动的效果: 在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove 但是如果弹窗内部也需要滚动,需要用scroll-view包裹,并设置scroll-y catchtouchmove需要接收个方法,不然会一直警告 <view class="box">占位</view> <view class="pop" catchtouchmove="touchMove&quo

  • 微信小程序页面上下滚动效果

    微信小程序页面上下滚动效果

    本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下 看图 源码 <view class="container container-fill"> <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrol

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

    微信小程序中如果判断页面滚动方向? 解决方案 1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll. 2.获取页面实际高度 <!--WXML--> <view id="box"> <view class="list" wx:for="{{List}}" wx:key="List{{index}

  • 微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下 先看效果是否是自己需要的 实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true J

  • 微信小程序页面滚动到指定位置代码实例

    这篇文章主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selectViewport().scrollOffset() query.select("#comment").boundingClientRe

  • 小程序中监听页面滚动的几种方法实例

    小程序中监听页面滚动的几种方法实例

    目录 目录 实现效果 下面是Intersection Observer在MDN上的介绍 IntersectionObserver relativeToViewport 接受参数 Object margins observe(string targetSelector, function callback) 参数 Object res 小程序中监听页面的其他方法 page-meta scroll-view 总结 在工作中我们经常遇到需要监听页面中元素位置,当元素超出显示区域或即将显示到页面上,我们

  • Android中监听短信的两种方法

    1.监听广播 缺点,因为优先级的原因可能接收不到. 代码: public static final String TAG = "ImiChatSMSReceiver"; public static final String SMS_RECEIVED_ACTION = "android.provider.Telephony.SMS_RECEIVED"; public void onReceive(Context context, Intent intent) { if

  • iOS中监听UITextField值改变事件的方法实例

    iOS中监听UITextField值改变事件的方法实例

    前言 在实际情况中我们有时候在界面输入时候需要让用户输入的数据与模型同步,那么可能我们就需要监听UITextField值改变事件,然后在响应的方法中将新的值同步到模型中.这次我们主要提出三种方案,其中第一种方案是不一定有效的,后两种方案则是比较可靠的方案. 一.实现UITextFieldDelegate协议. 这种方式实际上是由系统空间回调协议中的方式,并且通过查阅文档我们可以发现有以下相关接口是相关的. - (BOOL)textFieldShouldBeginEditing:(UITextFi

  • Android中监听Home键的4种方法总结

    昨天需要处理一个问题,需要监听home键.最开始想到使用onKeydonwn这个方法.但是发现home不能这样处理,onKeydonwn可以处理菜单键和back键,但home不能.因为home键是系统键,情况特殊一些. 看了一下网上的资料,说下面的方法可以.(其实不行) 复制代码 代码如下: @Override     public void onAttachedToWindow() {         // TODO Auto-generated method stub         Log

  • 微信小程序批量监听输入框对按钮样式进行控制的实现代码

    微信小程序批量监听输入框对按钮样式进行控制的实现代码

    在input组件上绑定data-model="xxx" bindinput="inputWatch",监听输入框输入: <input placeholder="请输入6~12位密码" name="password" value="{{password}}" data-model="password" bindinput="inputWacth" type=&qu

  • 微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 微信小程序如何监听全局变量

    微信小程序如何监听全局变量

    最近工作上遇到一个问题,有个全局变量 red_heart,因为它在很多地方用到,当它发生改变了,用到的地方也要改变.但是原生小程序并没有像Vue这种相关的做法.所以我就想自己实现一个全局变量改变,用到这个变量的地方也重新渲染. 开始吧 首先全局变量里肯定要先有这个 red_heart globalData: { red_heart:0, }, 然后要在onLaunch方法里给全局变量加一个Proxy代理. Proxy很好理解,懂得都懂. this.globalData = new Proxy(t

  • vue监听页面滚动到某个高度触发事件流程

    目录 监听页面滚动到某个高度触发事件 动态监听页面滚动高度 监听页面滚动到某个高度触发事件 methods: {    showIcon() {       if (         !!document.documentElement.scrollTop &&         document.documentElement.scrollTop > 200        ) {                         页面高度大于200执行操作         } else

  • Angular2监听页面大小变化的解决方法

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngOnInit方法中): ngOnInit() { // 页面监听 Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作 console.lo

  • vue中监听路由参数的变化及方法

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一页面切换id的值,并不会触发vue的声明周期函数. 可以添加路由监听: watch: { $route: { handler() { this.id = this.$route.query.id; this.get

随机推荐