アプレットの画像は怠惰にロードします.
11316 ワード
<view>
<view>
<view wx:for="{{img}}" class="item-{{index}}" wx:key="index">
<view wx:if="{{index < count}}">
<image src="{{item}}">image>
view>
view>
view>
view>
JSスクリプトの部分処理://index.js
//
const app = getApp()
let lazyload;
Page({
data: {
classNote: '.item-', //
count: 0, //
img: [
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://img.pic88.com/preview/2020/08/05/15966339461452544.jpg!s640w',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://js.pic88.com/upload/2020820/15979098400907496221',
'https://img.pic88.com/preview/2020/08/05/15966339251452714.jpg!s640w',
]
},
onReady: function () {
//
this.setData({
count: 5
})
// , onReady ,
this.viewPort()
},
viewPort: function () {
if ((this.data.count > this.data.img.length) || !wx.createIntersectionObserver) {
// API
return this.data.count = this.data.img.length
}
const intersectionObserver = wx.createIntersectionObserver();
// bottom:100, 100px , 。
intersectionObserver.relativeToViewport().observe(this.data.classNote + (this.data.count - 1), (res) => {
if (res.boundingClientRect.top > 0) {
intersectionObserver.disconnect()
this.setData({
count: this.data.count + 5
})
this.viewPort();
}
})
}
})
ここには2つの注意点があります.傍受ノードは、まずレンダリングする必要があります.つまり、この動作を待ち受けるには、オンリーリードの時に上記の例示的な傍受は、ループノードに依存するclassであり、少なくとも1つのノードをレンダリングして、1回のループノードを傍受した後、傍受を終了し、次のノードを待ち受け続ける必要があります.