uni-app如何向Vue那样操作dom节点
2024年8月2日
引言
一般节点渲染出来后，其样式多为固定。如果之后想进行样式变化，在Vue.js框架中，就可以在js模块用document API获取节点进行操作。但是uni-app并没有document这样的API，所以当碰到这种需要在js模块对节点进行操作时，就得需要其他方法。
1.简单的样式控制
介绍
因为uni-app用的是Vue.js框架，所以可以利用其响应式属性的特性，来动态更新样式。
步骤
- 创建一个响应式变量
let viewStyle=ref(‘’); - 将目标节点的style属性，改为:style=‘响应式变量’。或者class也是可以。
- 然后在js模块就可以随时修改viewStyle的值来更新节点的样式。比如在一个按钮点击事件函数中，希望点击按钮后，节点背景颜色变为红色
function Click(){
viewStyle.value=’
background-color: red;
}
2.uni-app的createSelectorQuery()
参考uni-app官网https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#selectorquery-selectall
介绍
该方法为uni-app内置的API，返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点也就是NodesRef，就是本文说的节点，要操作的也就是这个对象。之后使用 boundingClientRect 等方法选择需要查询的信息。
然后基于本文，将重点介绍如何用该API获取节点然后修改样式，最简单一下的用法就可以获取一个节点的样式属性
uni.createSelectorQuery().select().fields().exec()
- 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
- 默认需要使用到 selectorQuery.in 方法。
具体用例
获取类名为‘.testDom’的节点的width和height属性
- 首先获取selectorQuery对象
uni.createSelectorQuery()
- 之后选取NodesRef对象
uni.createSelectorQuery().select('.testDom')
- 根据需要的信息选择NodesRef的方法，获取样式需要用到fields()方法。
uni
.createSelectorQuery()
.select('.testDom')
.fields({ computedStyle: ['width', 'height'] },data=>{
//需要获取的值以绑定到data，可在此处进行代码编写
})
- 最后加上exec()才会执行所有的请求,完整代码如下
uni
.createSelectorQuery()
.select('.testDom')
.fields({ computedStyle: ['width', 'height'] },data=>{
//需要获取的值以绑定到data，可在此处进行代码编写
}).exec()
selectorQuery对象
slectorQuery是由createSelectorQuery()返回的对象，其下有以下方法可以选择节点，返回一个NodesRef对象。
selectorQuery.in(component)
将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance.proxy);
query
.select("#id")
.boundingClientRect((data) => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
})
.exec();
- 支付宝小程序不支持in这个方法，使用无效果
selectorQuery.select(selector)
在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。类似CSS的选择器，支持语法如下
- ID 选择器：#the-id
- class 选择器（可以连续指定多个）：.a-class.another-class
- 子元素选择器：.the-parent > .the-child
- 后代选择器：.the-ancestor .the-descendant
- 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant (H5 暂不支持)
- 多选择器的并集：#a-node, .some-other-nodes
selectorQuery.selectAll(selector)
在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
selectorQuery.selectViewport()
选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。
selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。
NodeRef对象
由selectorQuery的一些方法返回的节点对象，节点信息就在这个对象里
nodesRef.fields(object,callback)
获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。
nodesRef.boundingClientRect(callback)
添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。其功能类似于 DOM 的 getBoundingClientRect。返回 NodesRef 对应的 SelectorQuery。
nodesRef.scrollOffset(callback)
添加节点的滚动位置查询请求。以像素为单位。节点必须是 scroll-view 或者 viewport。返回 NodesRef 对应的 SelectorQuery。
nodesRef.context(callback)
添加节点的 Context 对象查询请求。支持 VideoContext、CanvasContext、和 MapContext 等的获取。
nodesRef.node(callback)
获取 Node 节点实例。目前支持 Canvas 的获取。
原文地址：https://blog.csdn.net/m0_61546943/article/details/143847445
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！