获取安全区域尺寸
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>
注意事项:
- 需要在
onMounted
或onReady
生命周期中调用 - 选择自定义组件中的节点时,需要调用
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>
注意事项:
- 不执行
exec
方法,将获取不到任何的节点信息 - 有多个查询步骤时,在结尾只执行一次
exec
即可,避免重复查询 exec
方法代表执行结束,因此务必保证最后再调用
1.1.3 节点信息
节点信息对象中包含了若干的信息,根据需要调用不同的方法进行获取:
boundingClientRect
节点的宽高及位置,长度单位是px
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>
注意事项:
- 在获取元素的位置时是按已定位的祖先元素为参考,即大家平时理解的“子绝父相”方式
- 元素未定位时参视口(viewport)为参考