uniapp 如何获取子元素的位置相对于父元素
时间: 2023-06-11 15:06:19 浏览: 128
可以使用uniapp中的`uni.createSelectorQuery()`方法获取子元素相对于父元素的位置信息。
具体步骤如下:
1. 给父元素和子元素分别设置一个唯一的id属性。
2. 在js文件中引入`uni.createSelectorQuery()`方法。
3. 使用`uni.createSelectorQuery()`方法获取父元素和子元素的位置信息。
4. 计算子元素相对于父元素的位置。
以下是示例代码:
HTML:
```html
<view id="parent">
<view id="child"></view>
</view>
```
JS:
```javascript
uni.createSelectorQuery().select('#parent').boundingClientRect(function(rect){
console.log(rect)
}).exec()
uni.createSelectorQuery().select('#child').boundingClientRect(function(rect){
console.log(rect)
}).exec()
```
以上代码分别获取了父元素和子元素的位置信息,并将信息打印在控制台中。接下来,我们可以计算子元素相对于父元素的位置。
```javascript
uni.createSelectorQuery().select('#parent').boundingClientRect(function(parentRect){
uni.createSelectorQuery().select('#child').boundingClientRect(function(childRect){
console.log('子元素相对于父元素的位置:', childRect.top - parentRect.top, childRect.left - parentRect.left)
}).exec()
}).exec()
```
以上代码计算了子元素相对于父元素的位置,并将结果打印在控制台中。