快捷導(dǎo)航

小程序中監(jiān)聽(tīng)頁(yè)面滾動(dòng)的幾種方法實(shí)例

更新時(shí)間：2022年04月18日 10:58:48 作者：前端小蝸

這段時(shí)間接了一個(gè)微信小程序項(xiàng)目,從此打開(kāi)小程序的新世界大門,下面這篇文章主要給大家介紹了關(guān)于小程序中監(jiān)聽(tīng)頁(yè)面滾動(dòng)的幾種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

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

實(shí)現(xiàn)效果

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

下面是Intersection Observer在MDN上的介紹

MDN鏈接

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

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

簡(jiǎn)單來(lái)說(shuō)，就是我們能不能看到想要觀察的對(duì)象。

在網(wǎng)頁(yè)中，我們很容易就可以用實(shí)現(xiàn)Intersection Observer，而在小程序中，我們需要再多掌握一點(diǎn)知識(shí)。

IntersectionObserver

小程序中IntersectionObserver的文檔地址

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

relativeToViewport

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

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

接受參數(shù) Object margins

用來(lái)擴(kuò)展（或收縮）參照節(jié)點(diǎn)布局區(qū)域的邊界

屬性	類型	必填	說(shuō)明
left	number	否	節(jié)點(diǎn)布局區(qū)域的左邊界
right	number	否	節(jié)點(diǎn)布局區(qū)域的右邊界
top	number	否	節(jié)點(diǎn)布局區(qū)域的上邊界
bottom	number	否	節(jié)點(diǎn)布局區(qū)域的下邊界

observe(string targetSelector, function callback)

參數(shù)

(targetSelector:string，callback:function)

Object res

屬性	類型	說(shuō)明
id	string	節(jié)點(diǎn) ID
dataset	Record.<string, any>	節(jié)點(diǎn)自定義數(shù)據(jù)屬性
intersectionRatio	number	相交比例
intersectionRect	Object	相交區(qū)域的邊界
boundingClientRect	Object	目標(biāo)邊界
relativeRect	Object	參照區(qū)域的邊界
time	number	相交檢測(cè)時(shí)的時(shí)間戳

小程序中監(jiān)聽(tīng)頁(yè)面的其他方法

page-meta

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

scroll-view

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

總結(jié)

在小程序中，我們可以用 IntersectionObserver ，來(lái)監(jiān)聽(tīng)頁(yè)面的元素與頁(yè)面交叉的距離，如此一來(lái)我們便可以在小程序中實(shí)現(xiàn)懶加載，預(yù)加載，動(dòng)畫等效果。

我們也可以用 page-meta 和 scroll-view 來(lái)實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)，具體需要結(jié)合實(shí)際場(chǎng)景。

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

您可能感興趣的文章: