uniapp 获取元素节点
时间: 2023-09-07 18:11:09 浏览: 216
uni-app 组件里面获取元素宽高的实现
在 `uniapp` 中,获取元素节点有多种方式,以下是其中几种常见的方法:
1. 使用 `uni.createSelectorQuery()` 方法获取元素节点,示例代码如下:
```javascript
uni.createSelectorQuery().select('.my-element').boundingClientRect(function(rect){
console.log(rect)
}).exec();
```
其中,`.my-element` 是需要获取的元素节点的 `class` 名称,`boundingClientRect` 方法可以获取元素节点的位置、大小等信息。
2. 使用 `uni.$refs` 获取元素节点,示例代码如下:
```html
<view ref="myElement" class="my-element">Hello World</view>
```
```javascript
this.$nextTick(() => {
const element = this.$refs.myElement.$el;
console.log(element)
})
```
其中,`ref` 属性用于标识需要获取的元素节点,`$nextTick` 方法可以确保元素节点已经渲染完成。
3. 使用 `document.querySelector()` 方法获取元素节点,示例代码如下:
```javascript
const element = document.querySelector('.my-element');
console.log(element)
```
其中,`.my-element` 是需要获取的元素节点的 `class` 名称,需要注意的是,`document.querySelector()` 方法只能在 `web` 端使用,不能在 `uniapp` 的小程序、App 等场景中使用。
以上是 `uniapp` 中获取元素节点的几种常见方法,具体使用方法可以根据实际场景选择合适的方式。
阅读全文