資訊專欄INFORMATION COLUMN
摘要：相交比例相交區(qū)域占參照區(qū)域的比例。閾值相交比例如果達到閾值，則會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。
意義
懶加載或者可以說是延遲加載，針對非首屏或者用戶"看不到"的地方延遲加載，有利于頁面首屏加載速度快、節(jié)約了流量,用戶體驗好
實現(xiàn)方式傳統(tǒng)H5的懶加載方式都是通過監(jiān)聽頁面的scroll事件來實現(xiàn)的，結(jié)合viewport的高度來判斷。
小程序也類似，通過監(jiān)聽頁面onPageScroll事件獲取當前滾動的數(shù)據(jù)，結(jié)合getSystemInfo獲取設(shè)備信息來判斷。由于scroll事件密集發(fā)生，計算量很大，經(jīng)常會造成FPS降低、頁面卡頓等問題。
這里說的是通過另外一種方式來實現(xiàn)
小程序基礎(chǔ)庫 1.9.3 開始支持，了解下
節(jié)點布局交叉狀態(tài)API可用于監(jiān)聽兩個或多個組件節(jié)點在布局位置上的相交狀態(tài)。這一組API常常可以用于推斷某些節(jié)點是否可以被用戶看見、有多大比例可以被用戶看見。
API涉及到的概念總共有5個
參照節(jié)點：監(jiān)聽的參照節(jié)點，取它的布局區(qū)域作為參照區(qū)域。如果有多個參照節(jié)點，則會取它們布局區(qū)域的 交集 作為參照區(qū)域。頁面顯示區(qū)域也可作為參照區(qū)域之一。
目標節(jié)點：監(jiān)聽的目標，默認只能是一個節(jié)點（使用 selectAll 選項時，可以同時監(jiān)聽多個節(jié)點）。
相交區(qū)域：目標節(jié)點的布局區(qū)域與參照區(qū)域的相交區(qū)域。
相交比例：相交區(qū)域占參照區(qū)域的比例。
閾值：相交比例如果達到閾值，則會觸發(fā)監(jiān)聽器的回調(diào)函數(shù)。閾值可以有多個。
通過以上API和概念的了解，可以獲取到圖片是否可以被用戶看見或者即將被看見，通過回調(diào)將圖片加載顯示出來，然后監(jiān)聽下一組即將被顯示的圖片，這樣就可以達到懶加載圖片的方式，以下是代碼展示
//index.js
//獲取應(yīng)用實例
const app = getApp()
let lazyload;
Page({
data: {
classNote: "item-", //循環(huán)節(jié)點前綴
count: 0, //總共加載到多少張
img: [] //圖片列表
},
onReady: function () {
//可以先初始化首屏需要展示的圖片
that.setData({
count: 5
})
//開始監(jiān)聽節(jié)點，注意需要在onReady才能監(jiān)聽，此時節(jié)點才渲染
lazyload.observe();
},
viewPort: function () {
const that = this;
var intersectionObserver = wx.createIntersectionObserver();
//這里bottom：100，是指顯示區(qū)域以下 100px 時，就會觸發(fā)回調(diào)函數(shù)。
intersectionObserver.relativeToViewport({bottom: 100}).observe(this.data.classNote + this.data.count, (res) => {
if(res.boundingClientRect.top > 0){
intersectionObserver.disconnect()
that.setData({
count: that.data.count + 5
})
that.viewPort();
}
})
}
})
//page.wxml
這里有2點需要注意的
監(jiān)聽的節(jié)點需要先渲染，也就是說監(jiān)聽這個動作需要在onReady的時候
上述示例監(jiān)聽是依賴循環(huán)節(jié)點的class，最少需要先渲染一個節(jié)點才能監(jiān)聽
每次監(jiān)聽完一個循環(huán)節(jié)點后，結(jié)束監(jiān)聽，然后繼續(xù)監(jiān)聽下一個節(jié)點
結(jié)果無論怎么快速滾動，F(xiàn)PS都能保持在60
總結(jié)H5其實也有一個類似的API，小程序的使用方式跟H5也是很類似，有很多東西都可以參考。針對上述監(jiān)聽的方式，我這邊簡單封裝了一個庫來調(diào)用，歡迎star。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96160.html
摘要：在重寫完了的時候，就個人總結(jié)了一下常用的一些常用的語法和比優(yōu)越的方面。參數(shù)字符串是否在原字符串的尾部返回布爾值。第一個大于的成員的索引方法，用于某個數(shù)組是否包含給定的值，返回一個布爾值。 1.前言 前幾天，用es6的語法重寫了我的一個代碼庫，說是重寫，其實改動的并不多，工作量不大。在重寫完了的時候，就個人總結(jié)了一下es6常用的一些常用的語法和比es5優(yōu)越的方面。下面提到的語法可能也就是...
摘要：最近的一次更新的變量有效，并且會作用于全部的引用的處理方式和相同，變量值輸出時根據(jù)之前最近的一次定義計算，每次引用最近的定義有效嵌套三種預(yù)編譯器的選擇器嵌套在使用上來說沒有任何區(qū)別，甚至連引用父級選擇器的標記也相同。 面試匯總一：2018大廠高級前端面試題匯總 高級面試：【半月刊】前端高頻面試題及答案匯總 css內(nèi)容 響應(yīng)式布局 當前主流的三種預(yù)編譯器比較 CSS預(yù)處理器用一種專門的...
摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設(shè)計實踐。無限滾動加載背后的技術(shù)挑戰(zhàn)其實比想象中要多不少。整體思路和方案設(shè)計我們要實現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設(shè)計實踐。 無限滾動加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...
摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設(shè)計實踐。無限滾動加載背后的技術(shù)挑戰(zhàn)其實比想象中要多不少。整體思路和方案設(shè)計我們要實現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設(shè)計實踐。 無限滾動加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...
閱讀 3439·2021-11-22 15:22
閱讀 2422·2021-09-06 15:00
閱讀 914·2020-06-22 14:39
閱讀 3742·2019-08-30 15:56
閱讀 1571·2019-08-30 12:55
閱讀 3353·2019-08-29 17:19
閱讀 3260·2019-08-26 11:41
閱讀 652·2019-08-23 17:14
