页面结构大体上是这样的:
<page>
<scroll-view>
......
<view class='fixedbar' hidden='{{fix}}'></view>
......
</scroll-view>
</page>
不管是绑定scroll-view
的scroll
事件,还是用createIntersectionObserver
接口,不管是用wx:if
,还是用hidden
,都有一个情况是:如果手指不离开屏幕并且不停止滑动,fixedbar就不会立刻显示出来,要手指停止滑动或者离开屏幕才行。
请教这是为什么?如何避免这个问题?谢谢~
在微信小程序中,可以通过使用window.innerHeight
属性来判断元素是否到达屏幕顶端。如果元素的高度小于等于window.innerHeight
,则表示元素已经到达屏幕顶端并固定。
以下是一个简单的示例:
javascript
let element = document.getElementById('myElement');
if (element.offsetHeight >= window.innerHeight) {
console.log('Element is fixed');
} else {
console.log('Element is not fixed');
}
在这个示例中,我们首先通过getElementById
方法获取到元素的引用。然后,我们使用getBoundingClientRect
方法获取到元素的大小,包括高度。最后,我们比较元素的高度和屏幕的垂直高度,如果两者相等,表示元素已经到达屏幕顶端并固定。
需要注意的是,window.innerHeight
的返回值是相对于视口的大小,如果你需要获取相对于页面的大小,可以使用getBoundingClientRect
方法的同时,传入window
作为参数。