微信小程序之判断目标元素是否在可视区域内
·
1、获取可使用窗口高度
const { windowHeight } = wx.getSystemInfoSync()
2、添加目标元素布局位置查询请求
const query = wx.createSelectorQuery()
query.select('#myElement').boundingClientRect()
3、判断元素是否在可视区域内
// windowHeight = top(目标元素刚进入可视区域)
// windowHeight - top = height(目标元素完全进入可视区域)
// top = 0 (目标元素刚离开可视区域)
// top + height = 0 (目标元素完全离开可视区域 )
if ((top < windowHeight) && (top + height > 0)) {
console.log('元素在可视区域出现')
} else {
console.log('元素在可视区域消失')
}
4、完整 Demo 代码
<!--pages/demo.wxml-->
<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>
// pages/demo.js
Page({
/**
* Lifecycle function--Called when page is initially rendered
*/
onReady: function () {
const { windowHeight } = wx.getSystemInfoSync()
setInterval(() => {
const query = wx.createSelectorQuery()
query.select('#myElement').boundingClientRect()
query.exec(rect => {
const { top, height } = rect[0]
// windowHeight = top(目标元素刚进入可视区域)
// windowHeight - top = height(目标元素完全进入可视区域)
// top = 0 (目标元素刚离开可视区域)
// top + height = 0 (目标元素完全离开可视区域 )
if ((top < windowHeight) && (top + height > 0)) {
console.log('元素在可视区域出现')
} else {
console.log('元素在可视区域消失')
}
})
}, 2000)
}
})
/* pages/demo.wxss */
.content-block {
margin-bottom: 40rpx;
width: 100%;
height: 700rpx;
background-color: lightblue;
}
更多推荐
所有评论(0)