uni-app(节点信息)

获取安全区域尺寸

js

const { safeAreaInsets } = uni.getSystemInfoSync()

css

最外层盒子{

podding-top:env(safe-area-inset-top)

podding-bottom:env(safe-area-inset-bottom)

}

条件编译

节点信息

在此再次强调一下原生小程序中并没有 DOM 操作相关的内容，也因此在 uni-app 中也是无法对 DOM 进行操作的，但在实际开发过程中是有获取节点信息，如宽高、位置等信息的需求的

1.1.1 创建查询器

在网页中可以直接使用 document.querySelector 来查找 DOM 节点，在 uni-app 或小程序中则没有这样一个方法，取而代之的是调用 API uni.createSelectorQuery 创建一个查询实例（查询器），进而调用该实例的方法来查询页面中的节点元素。

<script setup>
  import { onMounted } from 'vue'
	
  // 在生命周期中调用
  onMounted(() => {
    // 节点查询器（实例）
    const selectorQuery = uni.createSelectorQuery()
		console.log(selectorQuery)
  })
</script>

<template>
  <view class="container">
    <view class="box">获取这个盒子的宽高、位置等信息</view>
  </view>
</template>

<style lang="scss">
  page {
    padding: 30rpx;
  }

  .box {
    width: 300rpx;
    height: 300rpx;
    margin-top: 40rpx;
    background-color: pink;
  }
</style>

注意事项：

1. 需要在 onMounted 或 onReady 生命周期中调用
2. 选择自定义组件中的节点时，需要调用 in 方法并传入当前页面实例（后面会例子来演示）

1.1.2 节点对象

在查询节点时分成 3 种情形，获取到的结果为节点信息对象（NodesRef）

• select  根据选择器的要求，只查找符合条件的第一个节点，结果是一个对象
• selectAll 根据选择器的要求，查找符合条件的全部节点，结果是一个对象数组
• selectViewport 特指获取视口，查找视口的尺寸、滚动位置等信息

<script setup>
  import { onMounted } from 'vue'

  onMounted(() => {
    // 1. 节点查询器（实例）
    const selectorQuery = uni.createSelectorQuery()
    
    // 2. 查找节点

    // 2.1 查找单个节点
    selectorQuery.select('.box').boundingClientRect((rect) => {
      // 获取宽高和位置
      console.log(rect)
    })

    // 2.2 查找全部节点
    selectorQuery.selectAll('.box').boundingClientRect((rects) => {
      // 获取宽高和位置
      console.log(rects)
    })

    // 2.3 查找视口信息
    selectorQuery.selectViewport().boundingClientRect((rect) => {
      console.log(rect)
    })

    // 3. 执行请求结果
    selectorQuery.exec()
  })
</script>

<template>
  <view class="container">
    <view class="box">获取这个盒子的宽高、位置等信息</view>
    <view class="box"> 类选择器名称一样的另一个盒子 </view>
  </view>
</template>

<style lang="scss"></style>

注意事项：

1. 不执行 exec 方法，将获取不到任何的节点信息
2. 有多个查询步骤时，在结尾只执行一次 exec 即可，避免重复查询
3. exec 方法代表执行结束，因此务必保证最后再调用

1.1.3 节点信息

节点信息对象中包含了若干的信息，根据需要调用不同的方法进行获取：

1. boundingClientRect 节点的宽高及位置，长度单位是 px
2. scrollOffset 节点滚动的位置，仅支持 scroll-view 组件或页面（ viewport）

<script setup>
  import { onMounted } from 'vue'

  onMounted(() => {
    // 1. 节点查询器（实例）
    const selectorQuery = uni.createSelectorQuery()
    
    // 2. 查找节点

  	// 省略了部分代码

    // 2.3 查找视口信息
    selectorQuery.selectViewport().boundingClientRect((rect) => {
      console.log(rect)
    })
    selectorQuery.selectViewport().scrollOffset((offset) => {
      console.log(offset)
    })

    // 3. 执行请求结果
    selectorQuery.exec()
  })
</script>

<template>
  <view class="container">
    <view class="box">获取这个盒子的宽高、位置等信息</view>
    <view class="box"> 类选择器名称一样的另一个盒子 </view>
  </view>
</template>

<style lang="scss"></style>

注意事项：

1. 在获取元素的位置时是按已定位的祖先元素为参考，即大家平时理解的“子绝父相”方式
2. 元素未定位时参视口（viewport）为参考