小程序 - 判断元素是否在页面的显示区域内 wx.createIntersectionObserver

有时间再优化

于 2021-10-15 17:54:15 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_42340514/article/details/120788005

小程序专栏收录该内容

39 篇文章

订阅专栏

该博客介绍了如何在微信小程序中利用wx.createIntersectionObserver()创建观察器，通过.relativeToViewport()方法指定页面显示区域作为参照，监听.viewclass='ball'元素在视口内的显示状态。当intersectionRatio大于0时，表示元素进入可视区域，反之则离开。这是一种优化用户体验，提高性能的方法。

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

  onLoad() {
    this._observer = wx.createIntersectionObserver()
    this._observer
      //.relativeTo('.scroll-view')
      .relativeToViewport() //指定页面显示区域作为参照区域之一
      .observe('.ball', (res) => { //在参照区域里监听目标节点是否显示
        console.log(res);
        if(res.intersectionRatio > 0){
          console.log('.ball进入了可视区域')
        }else{
          console.log('.ball离开了可视区域')
        }
      })
  },
  onUnload() {
    //停止监听
    if (this._observer) this._observer.disconnect()
  }