uni-app如何向Vue那样操作dom节点

news2024/11/19 6:08:34

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();