在工作中我們經常遇到需要監(jiān)聽頁面中元素位置，當元素超出顯示區(qū)域或即將顯示到頁面上，我們就可以做一些動畫或者操作。最常見的操作比如預加載，懶加載，TAB滾動跟隨。

目錄

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

實現效果

在瀏覽器的情況下，我們可以使用 Intersection Observer

下面是Intersection Observer在MDN上的介紹

MDN鏈接

IntersectionObserver接口 (從屬于Intersection Observer API) 提供了一種異步觀察目標元素與其祖先元素或頂級文檔視窗(viewport)交叉狀態(tài)的方法。祖先元素與視窗(viewport)被稱為根(root)。

當一個IntersectionObserver對象被創(chuàng)建時，其被配置為監(jiān)聽根中一段給定比例的可見區(qū)域。一旦IntersectionObserver被創(chuàng)建，則無法更改其配置，所以一個給定的觀察者對象只能用來監(jiān)聽可見區(qū)域的特定變化值；然而，你可以在同一個觀察者對象中配置監(jiān)聽多個目標元素。

簡單來說，就是我們能不能看到想要觀察的對象。

在網頁中，我們很容易就可以用實現Intersection Observer，而在小程序中，我們需要再多掌握一點知識。

IntersectionObserver

小程序中IntersectionObserver的文檔地址

IntersectionObserver 對象，用于推斷某些節(jié)點是否可以被用戶看見、有多大比例可以被用戶看見。

relativeToViewport

指定頁面顯示區(qū)域作為參照區(qū)域之一

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // 相交區(qū)域占目標節(jié)點的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

接受參數 Object margins

用來擴展（或收縮）參照節(jié)點布局區(qū)域的邊界

observe(string targetSelector, function callback)

參數

(targetSelector:string，callback:function)

Object res

小程序中監(jiān)聽頁面的其他方法

page-meta

頁面屬性配置節(jié)點，用于指定頁面的一些屬性、監(jiān)聽頁面事件。只能是頁面內的第一個節(jié)點?？梢耘浜?nbsp;navigation-bar 組件一同使用。

scroll-view

可滾動視圖區(qū)域。使用豎向滾動時，需要給 scroll-view一個固定高度，通過 WXSS 設置 height。組件屬性的長度單位默認為px。

總結

在小程序中，我們可以用 IntersectionObserver ，來監(jiān)聽頁面的元素與頁面交叉的距離，如此一來我們便可以在小程序中實現懶加載，預加載，動畫等效果。

我們也可以用 page-meta 和 scroll-view 來實現滾動監(jiān)聽，具體需要結合實際場景。

到此這篇關于小程序中監(jiān)聽頁面滾動的幾種方法的文章就介紹到這了,更多相關小程序監(jiān)聽頁面滾動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論