在uni-app skyline页面使用组件的boundingClientRect的回调不执行

在uni-app skyline页面使用组件的boundingClientRect的回调不执行

开发环境 版本号 项目创建方式
Windows win11 CLI

示例代码：

<script setup lang="ts">  
// xxx.vue 组件  
import { onMounted, getCurrentInstance } from 'vue';  

const proxy = getCurrentInstance()!.proxy  
onMounted(() => {  
  uni.createSelectorQuery()  
    .in(proxy)  
    .select('#ads')  
    .boundingClientRect((res) => {  
      console.log(res)  
    })  
    .exec()  
})  
</script>  

<template>  
  <view>  
    <view id="ads" class="ads"></view>  
  </view>  
</template>

操作步骤：

"pages": [   
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app",  
        "navigationStyle": "custom",  
        "renderer": "skyline",  
        "componentFramework": "glass-easel"  
            }  
        }  
    ],

"mp-weixin" : {  
        "appid" : "",  
        "lazyCodeLoading": "requiredComponents",  
        "rendererOptions": { "skyline": { "defaultDisplayBlock": true } },  
        "setting" : {  
            "urlCheck" : false  
        },  
        "usingComponents" : true  
    },

更多关于在uni-app skyline页面使用组件的boundingClientRect的回调不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

微信原生语法中输出 this.createSelectorQuery().select(’#ads’)试试能否获取到Node

更多关于在uni-app skyline页面使用组件的boundingClientRect的回调不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


原生当中this.createSelectorQuery().select(’#ads’)这种语法可以但是in(this)又不行了，等下我去微信那边反馈，我记得昨天还是能够打印的不知道是我记错了还是什么

确定了是微信那边的问题换成这种方式可以获取，昨天不知道为什么不行但是今天又行了

在 UniApp 中使用 Skyline 渲染引擎时，如果你发现 boundingClientRect 的回调函数没有执行，可能是由于以下几个原因导致的。以下是一些排查和解决方法：

1. 确保组件已经渲染完成

boundingClientRect 是一个异步方法，它依赖于组件的渲染状态。如果组件尚未渲染完成，回调函数可能不会执行。

解决方法： 确保在组件渲染完成后再调用 boundingClientRect。可以在 onReady 生命周期钩子中调用该方法。

onReady() {
  const query = uni.createSelectorQuery().in(this);
  query.select('#myElement').boundingClientRect((rect) => {
    console.log('Bounding rect:', rect);
  }).exec();
}

2. 检查选择器是否正确

如果选择器（如 #myElement）无法匹配到任何节点，回调函数也不会执行。

解决方法： 确保选择器正确，并且目标组件已经存在。

query.select('#myElement') // 确保 #myElement 存在

3. 确保 Skyline 引擎支持

Skyline 渲染引擎是 UniApp 的新特性，可能在某些 API 或行为上与传统的 WebView 渲染引擎不同。如果 boundingClientRect 在 Skyline 中不支持或存在兼容性问题，回调函数可能不会执行。

解决方法：

  • 检查 UniApp 官方文档，确认 boundingClientRect 是否支持 Skyline 引擎。
  • 如果需要兼容性处理，可以针对不同渲染引擎编写不同的逻辑。

4. 检查异步逻辑

boundingClientRect 是一个异步方法，需要通过 .exec() 来触发执行。如果忘记调用 .exec()，回调函数不会执行。

解决方法： 确保调用 .exec()。

query.select('#myElement').boundingClientRect((rect) => {
  console.log('Bounding rect:', rect);
}).exec(); // 确保调用 exec()

5. 调试和日志

如果以上方法都无法解决问题，可以通过调试和日志来排查问题。

解决方法：

  • 在回调函数中添加日志，检查是否被调用。
  • 使用 uni.createSelectorQuery().in(this) 确保上下文正确。
const query = uni.createSelectorQuery().in(this);
query.select('#myElement').boundingClientRect((rect) => {
  console.log('Bounding rect:', rect); // 检查是否有日志输出
}).exec();
回到顶部