1、获取可使用窗口高度
const { windowHeight } = wx.getSystemInfoSync()
2、添加目标元素布局位置查询请求
const query = wx.createSelectorQuery()
query.select('#myElement').boundingClientRect()
3、判断元素是否在可视区域内
if ((top < windowHeight) && (top + height > 0)) {
console.log('元素在可视区域出现')
} else {
console.log('元素在可视区域消失')
}
4、完整 Demo 代码
<view>
<view class="content-block" />
<view class="content-block" />
<view id="myElement" class="content-block" style="background-color: lightcoral;" />
<view class="content-block" />
<view class="content-block" />
</view>
Page({
onReady: function () {
const { windowHeight } = wx.getSystemInfoSync()
setInterval(() => {
const query = wx.createSelectorQuery()
query.select('#myElement').boundingClientRect()
query.exec(rect => {
const { top, height } = rect[0]
if ((top < windowHeight) && (top + height > 0)) {
console.log('元素在可视区域出现')
} else {
console.log('元素在可视区域消失')
}
})
}, 2000)
}
})
.content-block {
margin-bottom: 40rpx;
width: 100%;
height: 700rpx;
background-color: lightblue;
}