账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    微信小程序,判断元素到达屏幕顶端并固定的问题
    34
    0

    页面结构大体上是这样的:

    <page>
        <scroll-view>
            ......
            <view class='fixedbar' hidden='{{fix}}'></view>
            ......
        </scroll-view>
    </page>

    不管是绑定scroll-viewscroll事件,还是用createIntersectionObserver接口,不管是用wx:if,还是用hidden,都有一个情况是:如果手指不离开屏幕并且不停止滑动,fixedbar就不会立刻显示出来,要手指停止滑动或者离开屏幕才行。

    请教这是为什么?如何避免这个问题?谢谢~

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 社会有形姐有样ゆ 普通会员 1楼

      在微信小程序中,可以通过使用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作为参数。

    更多回答
    扫一扫访问手机版