关于uni.createSelectorQuery().select(el).boundingClientRect 自定义组件获取不到值

最新推荐文章于 2024-11-14 17:16:16 发布
原创 最新推荐文章于 2024-11-14 17:16:16 发布 · 3.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #react.js

本文介绍了解决在uni-app自定义子组件中使用uni.createSelectorQuery().in(this)来正确获取元素信息的方法，避免因直接使用uni.createSelectorQuery()导致的数据为空问题。 
uni.createSelectorQuery().select("#scrollview").boundingClientRect(data => {
  console.log(data) // null
}).exec()

在自定义的子组件中，data为null，使用this.$nextTick，setTimeout仍然获取不到值

解决方案：
要用 in(this)，this传入的是自定义组件的实例，否则获取到的data值为null
uni.createSelectorQuery().in(this).select(“#scrollview”).boundingClientRect

uniapp createSelectorQuery().select 获取返回null报错
qq_36958916的博客
07-27 4403
uniapp createSelectorQuery().select 获取返回null报错
uniapp createSelectorQuery()方法获取不到节点问题
云雨之石的博客
03-10 3815
uniapp createSelectorQuery()方法获取不到节点问题
uni-app元素节点操作-uni.createSelectorQuery()
weixin_42220130的博客
03-16 3940
我们知道在vue中要想拿到dom元素，需要在dom元素挂载到页面上才可以，也就是在mounted()生命周期中，同理在uniapp中需要在页面生命周期中onReady() 或者组件周期mounted()内获取才有效。遇到一个问题，App进入到一个新的页面，初始化时候想获取某个dom节点的高度。onLoad() { //页面初始化执行,用户页面获取参数},onReady() { //页面初次渲染完毕执行},又出现新的问题 每次获取dom的时候高度为0。问题得到了解决，获取到了高度。
解决：uni.getMenuButtonBoundingClientRect()；获取到的数据都为零的问题
黑客与画家
09-27 6842
出现场景： 正常进入可以获取得到 但是进入小程序之后，点击右上角，点击重新进入小程序就会出现获取都为0的情况 console.log('oMenuBtn:',oMenuBtn);//打印 width:0,bottom:0,top:0,... 代码是写在App.vue里面，启动后获取状态栏的高度并存到vuex中使用 oMenuBtn = uni.getMenuButtonBoundingClientRect() console.log('oMenuBtn:',oMenuBtn); s
wx.createSelectorQuery().select().boundingClientRect().exec方法无限循环
m0_50871362的博客
04-12 1684
// An highlighted block let query = wx.createSelectorQuery(); let $topInformation = query.select('#view'); let $scrollView = query.select('#view2'); $topInformation.boundingClientRect((rect)=>{ $scrollView.boundingClientRect((rect2)=>{ console.log
uni.createSelectorQuery().in(this).select(‘#scroll‘).boundingClientRect获取不到元素高度问题
FUFCY的博客
03-10 2167
uniapp滚动底部获取不到高度原因
uni.createSelectorQuery().select()总是获取不到元素
热门推荐
qq_38026437的博客
12-20 2万+
使用uni.createSelectorQuery().select 选择元素时经常获取不到 报一些 height 或者 width null或者找不到 到官方查了之后才发现需要加上 in（this） 只要加上 let el = uni.createSelectorQuery().in(this).select('#' + id); 就不会有这种问题了 ...
h5 这个方法好像报错 : calculateDrawerHeight() { this.$nextTick(() => { const query = uni.createSelectorQuery().in(this); query.select('.drawer-header').boundingClientRect(headerRect => { query.select('.drawer-footer').boundingClientRect(footerRect => { const windowHeight = uni.getSystemInfoSync().windowHeight; const headerHeight = headerRect.height || 0; const footerHeight = footerRect.height || 0; this.drawerBodyHeight = windowHeight - this.safeAreaInsets.top - headerHeight - footerHeight - this.safeAreaInsets.bottom - 20; // 额外边距 }).exec(); }).exec(); }); },
09-26
3. **组件作用域**：在自定义组件中使用选择器查询时，需要正确指定组件作用域。 ### 解决方案： 使用Vue的`$nextTick`确保DOM更新后执行查询，并移除`.in(this)`，改为使用选择器作用域。同时，使用`exec`方法统一...
scrollToSection('#scrollItem1') const scrollToSection = (selector: any) => { debugger // 创建选择器查询实例 const query = uni.createSelectorQuery() // 查询 container 的位置信息 query .select(selector) .boundingClientRect(function (rect: any) { debugger if (rect) { let top = rect.top uni.pageScrollTo({ scrollTop: top, duration: 300 }) } else { console.error(selector + ' does not exist') } }) .exec() }
09-19
`selector` 查询范围错误 | `.select()` 默认只查询当前自定义组件内，而 `#scrollItem1` 可能在页面层级 | | 2. `rect.top` 是相对于视口的偏移，不是 `scrollTop` 的绝对值 | 滚动目标应是 `document.scrollTop +...
uni createSelectorQuery
06-26
在小程序或 App 端无法直接使用 `document.body.appendChild` 插入组件节点时，可以借助 `uni.createSelectorQuery` 获取目标容器节点，并将组件插入到该容器中。例如，在页面中预设一个 `<view id="modal-root"></...
canvas.boundingClientRect().exec返回null
07-29
- *1* *2* [关于uni.createSelectorQuery().select(el).boundingClientRect 自定义组件获取不到值](https://blog.csdn.net/qq_36639113/article/details/124970523)[target="_blank" data-report-click={"spm":"1018...
<!-- components/zy-popup-dropdown-menu.vue --> <template> <view> <!-- 触发元素插槽：支持自动绑定 open 方法 --> <slot name="reference" :open="open" :close="close" :toggle="toggle"> <!-- 默认触发器（可删除） --> <view v-if="!$slots.reference" data-reference @tap="open"> 点击选择 ▼ </view> </slot> <!-- 浮动下拉菜单 --> <view v-if="visible" ref="dropdownRef" class="zy-popup-dropdown-menu" :style="{ top: `${top}px`, left: `${left}px`, transform: position }" @touchmove.stop > <view class="dropdown-content"> <view v-for="item in props.data" :key="item[props.valueKey]" class="dropdown-item" :class="{ 'is-selected': props.modelValue === item[props.valueKey] }" @tap="handleSelect(item[props.valueKey])" > <text class="item-label">{{ item[props.labelKey] }}</text> <text v-if="props.modelValue === item[props.valueKey]" class="icon-check"></text> </view> </view> </view> </view> </template> <script setup> import { ref, nextTick, onUnmounted } from 'vue' // ---------------------- // Props // ---------------------- const props = defineProps({ data: { type: Array, required: true }, modelValue: { type: [String, Number, null], default: null }, labelKey: { type: String, default: 'label' }, valueKey: { type: String, default: 'value' }, // 接收外部传入的 ref referenceRef: { type: Object, default: null } }) // ---------------------- // Emits // ---------------------- const emit = defineEmits(['update:modelValue', 'change', 'open', 'close']) // ---------------------- // 内部状态 // ---------------------- const visible = ref(false) const top = ref(0) const left = ref(0) const position = ref('translateY(8px)') const dropdownRef = ref(null) const referenceRect = ref(null) // 缓存触发器位置 let observer = null // ---------------------- // 方法定义 // ---------------------- // 打开下拉框 const open = async () => { if (visible.value) return let rect = null console.log('🚀 ~ open ~ props.referenceRef:', props.referenceRef) console.log('🚀 ~ open ~ props.referenceRef.$el:', props.referenceRef.$el) console.log('🚀 ~ open ~ props.referenceRef.el:', props.referenceRef.el) if (props.referenceRef && props.referenceRef.$el) { // Vue 实例有 $el（H5 平台） rect = await getRectFromElement(props.referenceRef.$el) } else if (props.referenceRef?.el) { // uni-app 中 ref.el 是真实节点（App/小程序） rect = await getRectFromElement(props.referenceRef.el) } else { console.warn('[zy-popup-dropdown-menu] 未提供有效的 referenceRef') return } const res = await new Promise(resolve => { uni.createSelectorQuery().selectViewport().scrollOffset().exec(resolve) }) const scroll = res[0] const windowHeight = scroll.windowHeight || scroll.height const maxHeight = 486 const needUpward = windowHeight - rect.bottom < maxHeight left.value = rect.left top.value = needUpward ? rect.top - maxHeight - 8 : rect.bottom + 8 position.value = needUpward ? 'translateY(-8px)' : 'translateY(8px)' visible.value = true emit('open', props.modelValue) nextTick(() => { bindOutsideClickListener() bindScrollListener() }) } // 获取 DOM 元素 boundingClientRect function getRectFromElement(el) { return new Promise(resolve => { if (!el) return resolve(null) const query = uni.createSelectorQuery() query.select(`#${el.id}`).boundingClientRect() if (!el.id) { // 如果没有 id，尝试用临时 id el.id = 'temp-dropdown-trigger-' + Date.now() query.select(`#${el.id}`).boundingClientRect() setTimeout(() => { el.id = '' }, 100) // 清理 } query.exec(res => { resolve(res[0]) }) }) } // 关闭 const close = () => { if (!visible.value) return visible.value = false emit('close') removeListeners() } // 切换 const toggle = () => { visible.value ? close() : open() } // 选择项 const handleSelect = value => { if (props.modelValue !== value) { emit('update:modelValue', value) emit('change', value) } close() } // 外部点击关闭 const bindOutsideClickListener = () => { const handler = () => close() uni.$on('onPageTap', handler) observer = { ...observer, cleanupTap: () => uni.$off('onPageTap', handler) } } // 滚动关闭 const bindScrollListener = () => { const scrollHandler = () => close() uni.$on('onPageScroll', scrollHandler) observer = { ...observer, cleanupScroll: () => uni.$off('onPageScroll', scrollHandler) } } // 移除监听 const removeListeners = () => { observer?.cleanupTap?.() observer?.cleanupScroll?.() observer = null } // ---------------------- // 兼容性处理：thisContext 模拟 this // 因为 script setup 中没有 this，我们需要一个上下文对象 // 注意：HBuilderX 编译时会将组件实例注入到页面作用域 // 我们可以通过 getCurrentInstance 获取当前实例 uid，用于 in() import { getCurrentInstance } from 'vue' const instance = getCurrentInstance() const thisContext = instance.ctx || instance.proxy // ---------------------- // 暴露方法 // ---------------------- defineExpose({ open, close, toggle }) // ---------------------- // 卸载清理 // ---------------------- onUnmounted(() => { removeListeners() }) </script> <style scoped> /* 注意：给插槽外层加一个标记类名，便于查询 */ /* Vue 不直接支持 slot 元素样式，但我们可以在父级包裹或约定结构 */ /* 这里假设用户使用的元素会被包裹在一个具有特定结构的容器中 */ .zy-popup-dropdown-menu { position: fixed; width: 215px; max-height: 486px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 9999; overflow: hidden; } .dropdown-content { height: 100%; max-height: 486px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 15px; color: #333333; border-bottom: 1px solid #f5f5f5; } .dropdown-item:last-child { border-bottom: none; } .dropdown-item.is-selected { color: #0f56d5; font-weight: 500; } .item-label { flex: 1; word-break: break-word; line-height: 1.4; text-align: left; } .icon-check { font-family: 'erda' !important; font-size: 16px; margin-left: 8px; color: #0f56d5; } </style> open ~ props.referenceRef: null
最新发布
10-15
- 获取不到触发器元素（`rect = null`） - 菜单无法定位 - 报错 `[zy-popup-dropdown-menu] 未提供有效的 referenceRef` --- ## 根本原因分析 ### ❌ 问题根源：`ref` 传递顺序与生命周期错位 虽然你在父组件...
var top=0 uni.createSelectorQuery().select('.search').boundingClientRect(function(rect) { top...
weixin_35750953的博客
01-03 435
你好！ 这个代码使用了 uni.createSelectorQuery().select('.search').boundingClientRect(function(rect) { top=rect.top }).exec() 来获取 .search 元素的位置信息，并将位置信息的 top 值赋值给了变量 top。如果你发现 top 的值仍然是 0，可能有以下几种情况： .search 元素没...
unapp 开发微信小程序 使用wx.createSelectorQuery()时候一直获取不到元素信息。
柑橘乌云_
08-29 1956
但是在uni的官方文档中并没有关于需要切换this的介绍，是用uni.createSelectorQuery()在自定义组件内部也是无效的。在自定义组件中，使用wx.createSelectorQuery() 不能用wx. 而是this.createSelectorQuery()
uni.createSelectorQuery()获取元素height获取不到或者与调试工具实际测量不一致
swag_12581的博客
04-09 1800
页面onShow时页面DOM还未渲染完毕，应当在onReady中调用，且需做个延迟。如果修改后还是不一致可以适当增加定时器的时长。
uniapp+vue3在组件中使用createSelectorQuery查询不到元素的解决方法
qq_45737863的博客
11-14 886
在页面中可以正常获取但是在组件中就无法获取到元素，需要将代码改为下面格式。
uniapp中uni.createSelectorQuery()获取不到元素信息问题
xsaid的博客
08-06 7493
我需要拿到循环的元素的高度信息，毫不犹豫就会想到vue中this.$nexTick(),但是使用此方法你会一直回去不到元素信息会报错。小编接触uniapp也是快一年的时间今天给大家分享的是uni.createSelectorQuery()此方法获取元素失败的问题。把this.$nexTick()换成setTimeout()即可！...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值