uniapp监听元素高度

要监听元素高度，可以使用 `uni.createIntersectionObserver()` API 创建一个交叉观察器对象，然后使用 `observe()` 方法观察元素，当元素进入或离开视图区域时，就会触发相应的回调函数。在回调函数中可以获取到元素的高度信息。

具体步骤如下：

1. 在 `mounted` 生命周期函数中创建交叉观察器对象：

mounted() {
  this.observer = uni.createIntersectionObserver(this, {
    observeAll: true // 是否观察所有节点
  })
}

2. 在需要监听高度的元素上添加 `ref` 属性，以便获取到其引用：

<view ref="myElement">这是要监听高度的元素</view>

3. 在 `mounted` 生命周期函数中观察该元素：

mounted() {
  // ...
  this.observer.observe('.my-element', (res) => {
    console.log(res)
    // 在这里可以获取到元素的高度信息
  })
}

其中，`.my-element` 为元素的 CSS 选择器，可以根据实际情况修改。

注意：需要在 `onDestroy` 生命周期函数中取消观察器对象：

onDestroy() {
  this.observer.disconnect()
}

相关问题

uniapp vue3 中监听元素高度变化

在 uni-app 中使用 Vue3 监听元素高度变化可以使用 ResizeObserver。

首先你需要在 main.js 中引入 ResizeObserver polyfill：

import '@vue/devtools'
import Vue from 'vue'
import App from './App'
import './registerServiceWorker'
import './styles/index.scss'
import { ResizeObserver } from '@juggle/resize-observer'

Vue.config.productionTip = false

Vue.use(ResizeObserver)

new Vue({
  render: h => h(App)
}).$mount('#app')

然后在你的 Vue 组件中使用 ResizeObserver 即可：

import { ResizeObserver } from '@juggle/resize-observer'

export default {
  data() {
    return {
      height: 0,
    }
  },
  mounted() {
    this.resizeObserver = new ResizeObserver(entries => {
      const entry = entries[0]
      this.height = entry.contentRect.height
    })
    this.resizeObserver.observe(this.$refs.observer)
  },
  beforeDestroy() {
    this.resizeObserver.disconnect()
  },
}

在模板中你可以这样使用：

<template>
  <div ref="observer">{{ height }}</div>
</template>

注意：ResizeObserver 会对性能造成一定的影响，所以在使用的时候应该谨慎考虑是否真的需要使用。

uniapp获取dom元素

### 回答1：
在uni-app中获取DOM元素可以使用以下方法：

1. 使用 `this.$refs` 获取元素的引用：

<template>
  <div ref="myDiv">Hello World</div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
    console.log(myDiv);
  }
}
</script>

2. 使用 `uni.createSelectorQuery()` 方法获取元素：

<template>
  <div id="myDiv">Hello World</div>
</template>

<script>
export default {
  mounted() {
    uni.createSelectorQuery().select('#myDiv').boundingClientRect((rect) => {
      console.log(rect);
    }).exec();
  }
}
</script>

上述方法可以获取元素的位置、宽度、高度等信息。注意，在使用 `uni.createSelectorQuery()` 时，需要在 `mounted()` 生命周期函数中调用，因为该方法需要等待DOM渲染完成后才能获取元素信息。

### 回答2：
在Uniapp中获取DOM元素有多种方式。下面是一些常用的方法：

1. 使用uni.createSelectorQuery()方法：通过调用uni.createSelectorQuery()方法，可以创建一个选择器实例。然后，可以使用实例的方法来选择和操作DOM元素。例如，可以使用select()方法选择一个DOM元素，使用boundingClientRect()方法获取DOM元素的位置和大小信息，并使用exec()方法执行操作。示例代码如下：

uni.createSelectorQuery().select('.my-element').boundingClientRect(function(rect){
    console.log(rect)
}).exec()

2. 使用$refs属性：在Vue组件中，可以通过$refs属性来获取DOM元素的引用。首先，在template中给DOM元素添加ref属性，然后通过this.$refs来访问DOM元素。示例代码如下：

<template>
    <view ref="myElement">Hello Uniapp</view>
</template>

<script>
export default {
    mounted(){
        console.log(this.$refs.myElement)
    }
}
</script>

3. 使用自定义事件：在需要获取DOM元素的组件中，可以通过自定义事件的方式将DOM元素传递给父组件。首先，在子组件中触发自定义事件并传递DOM元素，然后在父组件中监听自定义事件，并获取DOM元素。示例代码如下：
子组件：

<template>
    <view @get-dom="$emit('get-dom', $el)">Hello Uniapp</view>
</template>

父组件：

<template>
    <my-component @get-dom="handleGetDom"></my-component>
</template>

<script>
export default {
    methods: {
        handleGetDom(dom){
            console.log(dom)
        }
    }
}
</script>

通过上述方法，可以方便地在Uniapp中获取DOM元素并进行操作。