1***@163.com
1***@163.com
  • 发布:2023-09-18 01:14
  • 更新:2023-09-18 20:02
  • 阅读:855

uniapp app-plus 使用uni.createIntersectionObserver时出现e.querySelectorAll is not a function

分类:uni-app
  1. 手机端调试基座版本号:3.8.12
  2. 手机型号: oppo find x5 pro
  3. HBuilder X版本:3.8.12
  4. vue版本:3

使用uni.createIntersectionObserver时出现e.querySelectorAll is not a function错误

使用方式:

observerInstance.value = uni.createIntersectionObserver(instance.value, { observeAll: true });  
unref(observerInstance)?.relativeToViewport().observe(`#_top,#_bottom`, observerCallback);

查看了observe方法中的源码,发现使用了querySelectorAll方法,在app-plus端是否无法执行该方法?解决方案是什么?
请问如何处理?

2023-09-18 01:14 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

app是可以使用该方法的,确保在onReady生命周期或者点击事件中使用,可以跑一下这个示例

<template>  
    <view class="container">  
        <text>{{appear ? '小球出现' : '小球消失'}}</text>  
        <view class="page-section">  
            <scroll-view class="scroll-view" scroll-y>  
                <view class="scroll-area">  
                    <text class="notice">此区域向上滑动让小球出现</text>  
                    <view class="ball"></view>  
                </view>  
            </scroll-view>  
        </view>  
    </view>  
</template>  
<script>  
    let observer = null;  
    export default {  
        data() {  
            return {  
                appear: false  
            }  
        },  
        onReady() {  
            observer = uni.createIntersectionObserver(this);  
            observer.relativeTo('.scroll-view').observe('.ball', (res) => {  
              if (res.intersectionRatio > 0 && !this.appear) {  
                this.appear = true;  
              } else if (!res.intersectionRatio > 0 && this.appear) {  
                this.appear = false;  
              }  
            })  
        },  
        onUnload() {  
            if (observer) {  
                observer.disconnect()  
            }  
        }  
    }  
</script>  
<style>  
    view,page {  
        display: flex;  
        flex-direction: column;  
    }  

    .scroll-view {  
        height: 400rpx;  
        background: #fff;  
        border: 1px solid #ccc;  
        box-sizing: border-box;  
    }  

    .scroll-area {  
        height: 1300rpx;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        transition: .5s;  
    }  

    .notice {  
        margin-top: 150rpx;  
        margin: 150rpx 0 400rpx 0;  
    }  

    .ball {  
        width: 200rpx;  
        height: 200rpx;  
        background: #1AAD19;  
        border-radius: 50%;  
    }  
</style>  
  • 1***@163.com (作者)

    无法确保在onReady生命周期或者点击事件中使用怎么办?因为做的虚拟列表功能,需要在watch中执行

    2023-09-18 18:16

1***@163.com

1***@163.com (作者)

知道问题出在哪了,我只在onMounted使用getCurrentInstance获取了一次instance,只要每次使用uni. createIntersectionObserver时都用getCurrentInstance获取一次就没问题了

  • 1***@163.com (作者)

    而这个问题在微信小程序端是没事的,在app-plus就出问题了

    2023-09-18 20:03

要回复问题请先登录注册