uni-app操作DOM节点

最新推荐文章于 2026-06-17 22:43:02 发布
原创 最新推荐文章于 2026-06-17 22:43:02 发布 · 4.2w 阅读 · 15 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
uni-app

当前文章被收录于：

uni-app
2 篇文章 0 人学习
订阅专栏 查看详情
本文分享了uni-app框架的学习心得，该框架能够实现一次开发，六端适配的目标，极大提升了跨平台开发的效率。文章详细介绍了如何使用uni-app获取category-list高度的代码示例。

最近学到了一个比较好用的框架uni-app，可以做六端适配，学习一下！！！

官网文档找了好久才找到这个。
 

//获取category-list的高度
let view = uni.createSelectorQuery().select('.category-list');
		view.fields({
			size: true
		},
	    data => {
			this.categoryHeight = data.height + 'px';
}).exec();

完美！！

标签
#学习 #uni-app
从H5到uni-app：迁移‘滚动菜单高亮’功能时，我踩过的3个关键差异点
weixin_29002209的博客
03-29 378
本文分享了从H5迁移到uni-app时实现滚动菜单高亮功能的3个关键差异点，包括从浏览器环境到跨端容器的范式迁移、节点查询的异步革命以及性能优化与平台差异的平衡术。通过对比H5和uni-app的环境差异、异步查询机制和各平台性能特性，帮助开发者避免常见陷阱，提升跨端开发效率。
软件需求规格说明书（SRS）标准模板
moton2017的博客
08-07 2680
《软件需求规格说明书（SRS）框架解析》摘要： 本文档系统阐述了SRS的标准结构，包含7大核心部分：1）引言（目的、背景和术语）；2）总体描述（产品定位与用户特征）；3）功能需求（模块化功能说明）；4）非功能需求（性能、安全等指标）；5）接口需求（用户/硬件/软件接口）；6）其他技术要求；7）附录（图表与参考资料）。重点突出了功能需求模块的标准化描述模板（FR-01），以及安全需求中的HTTPS通信、SHA-256加密等关键指标。该框架为软件开发提供了明确的需求基准，涵盖从业务背景到技术实现的完整链条，是确
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该元素的子节点数组。注意：换行在浏览器中作为text节点，需要进行过滤 element.firstChild：该元素的第一个子节点。 element.lastChild：该元素最后一个子节点。 3、父节点 element[removed] 4、兄弟节点 element.previousSibling：返回相同的
apk反编译修改教程系列-----修改apk应用名称 任意修改名称 签名【一】
小马哥的专栏
10-23 7205
这个是最最简单的反编译操作了。写这个教程的目的是其中很多粉丝要求出一点入门的教程。当然演示的是使用MT来操作。还有很多类似的软件可以达到目的。例如NP apltool等等或者电脑端也有很多反编译软件修改。对于玩机用户来说。也可以在系统包里直接修改一些app。
Java带钱包、redis数据库和uniapp端的区块链项目实战教程
06-29
涉及内容：注意，学习此视频必须有一定基础的同学区块链相关知识、钱包相关知识、p2p相关知识、uniapp相关知识    01前言    02成果展示    03前言区块链概念和六层模型介绍    04翻译一个带币的js简单例子原理介绍    05区块链springboot工程搭建和区块相关实现    06区块链中加密算法相关介绍以及实现    07钱包相关实体类介绍    08redis数据库等配置和工具类的介绍    09区块链相关实体类介绍    10挖矿相关实体类和POW相关的介绍    11 p2p 点对点 server和client代码    12 p2p 原理的简单介绍    13 节点钱包相关启动实现    14 web控制层逻辑基础代码    15 web功能的整体介绍    16 web钱包功能-创建钱包账户的完整功能实现    17 web钱包功能-获取挖矿钱包信息和根据钱包地址获取信息    18 web钱包功能-获取当前节点所有钱包    19 全节点钱包轻钱包中心化钱包的概念    20 p2p三个节点的相关配置并启动    21 p2p 节点添加相关流程    22 p2p 节点列表相关实现    23 区块相关挖矿与挖矿奖励等讲解    24 区块链相关的查询操作    25 交易转账相关逻辑    26 三台机器节点运行 uniapp开发前准备    27 uniapp首页和我的页面实现    28 uniapp 节点钱包和节点钱包列表展示    29 uniapp添加节点，节点列表挖矿区块链查询等    30 uniapp我的钱包转账查询交易等    31 课程总结以及代码资料等相关说明
uniapp真机 document.getElementById报错
qq_26762529的博客
08-11 1万+
uniapp真机 document.getElementById报错
Uni-App开发3个月，我踩过的27个坑与性能翻倍的秘密！！！
最新发布
CCSkonig的博客
06-17 228
《uni-app避坑指南与实战经验》摘要 本文总结了uni-app开发中的常见问题与优化方案，涵盖环境配置、项目结构、请求封装、性能优化等核心内容。环境配置方面，建议选择稳定版HBuilderX，正确配置微信开发者工具路径；项目结构应遵循组件化拆分原则。请求封装推荐生产级解决方案，包含错误处理、token刷新等机制。性能优化重点介绍了骨架屏实现、图片加载策略，可使App启动速度提升3倍。多端适配通过条件编译实现不同平台的扫码、登录功能。最后提供了20条实用避坑建议，如处理包体积超标、列表渲染卡顿等问题。
前端获取节点方法总结
weixin_43900440的博客
12-18 1788
前端节点获取
uni-app插槽 在自定义组件中插入dom元素
weixin_45966674的博客
05-25 1496
这里 我们使用了刚才定义的 dom.vue 组件 然后在里面 插入了一个view标签 内容是 这是插槽内容。想必大家对这个slot 并不陌生 和vue一样的插槽操作 等一会儿 我们插入的元素就会被放到这个位置。然后 我们在pages目录下的index下的 index.vue中编写代码如下。官方做了对应处理 H5 小程序 App都是可以兼容的。说到插槽 想必接触过vue的朋友并不陌生。而uni-app的插槽用法也基本是一样的。可以看到 内容就成果插入在了slot上。
uni-app如何向Vue那样操作dom节点
m0_61546943的博客
11-18 2961
在uni-app中，由于缺乏document API，开发者需要采用其他方法来动态控制节点样式。本文提供了两种方法：一是利用Vue.js的响应式属性，通过绑定style或class属性来更新样式；二是使用uni-app的createSelectorQuery() API，通过选择节点并获取其信息来修改样式。createSelectorQuery()方法允许开发者获取节点的布局位置、滚动位置等，而NodeRef对象提供了获取节点详细信息的手段。这些方法帮助开发者在uni-app中灵活操作节点，实现丰富的交互效
Vue获取dom元素节点并操作元素的样式（$el的用法以及uni-app中操作元素样式）
qq_39224105的博客
12-29 9596
在vue中操作dom元素节点的样式有好几种方式这里我总结了两种 第一种： 1.获取到元素节点(这里通过this.$refs获取元素节点) this.$refs.xxxxx.$el 2.操作元素的样式 this.$refs.num1Underline.$el.style.transform = 'scaleX(1)'; 这种方法需要注意的是$el 用于获取vue挂载的实例的dom对象，如果不添加$el则获取不到style的属性值，会打印 TypeError: Cannot read property .
uni-app动态操作dom节点
cxc709467878的博客
11-22 6860
<view v-for="(item,index) in arr[all].sk" :key="index"> <view ref="dom" @click="Skems(index)"> {{item}} </view> 渲染完数组 export default{ data(){ return{ sk:[name:'S',name:'M',name:'...
uni-app 拖拽排序
weixin_46677214的博客
11-15 5487
uni-app 拖拽排序 前言 这周做一个页面时，有一个人物排序，可以手动拖动更改排序位置的功能。在经过查找之后，找到了 sortable.js,它可以用来实现这个拖拽的功能。 思路 在查看sortable.js官方文档时，看到里面中有一个onUpdate事件，拖拽改变位置后，其中的返回值中，就有着起始index值和改变后的index值，通过这个，就可以更改数组的内容，来达到拖拽后改变位置的功能。 步骤 安装sortable.js npm install sortablejs --save-dev 获取节点
uni-app之生命周期函数
weixin_43845137的博客
04-05 2240
目录uni-app之生命周期函数应用的生命周期 App.js页面之中的生命周期函数 uni-app之生命周期函数 应用的生命周期 App.js onLaunch 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） onShow 当小程序启动，或从后台进入前台显示，会触发 onShow onHide 当小程序从前台进入后台，会触发 onHide onError 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息 <script> export
html、vue、uni-app微信小程序的区别
南北极之间
04-25 1293
html、vue、uni-app微信小程序的区别
快速了解uni-app（html、vue、小程序的区别）
2401_84097427的博客
04-10 741
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-SwXmuVsq-1712753805357)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
uniapp 之 uni-table组件添加行点击事件
热门推荐
zhuang的博客
12-14 1万+
uni-table组件设置行点击事件
uni-app 获取 DOM 节点的相关信息
zuomengjia的博客
05-02 7116
uni-app 获取 DOM 节点的相关信息 一、如何获取 SelectorQuery 对象实例 let query = uni.createSelectorQuery(); 功能：返回一个selectorQuery对象的实例，该实例用来查询DOM节点的信息。 注意事项： （1）该方法需要在生命周期mounted后进行调用。 （2）nvue不支持该方法。 二、如何获取DOM节点 1、获取匹配...
uni-app(节点信息)
mengmoyong的博客
09-22 3184
类选择器名称一样的另一个盒子 </view><view class="box">获取这个盒子的宽高、位置等信息</view><view class="box">获取这个盒子的宽高、位置等信息</view><view class="box">获取这个盒子的宽高、位置等信息
uniapp中app真机模拟中的常见问题以及在VUE3中编写代码遇到的问题
weixin_47602884的博客
01-16 462
由于在之前不知道怎么使用onLoad，导致我不知道怎么接收路由跳转的参数，尝试通过vue3的getCurrentInstance获取实例后拿到，这在h5是可以的，但是真机测试不行，他拿不到$options、dom等，所以想用它获取dom进行一些计算也是不行的。http://192.168.88.10:8088/drawing/ 测试7/20250108161057_小图_test.png。1.尝试将路径中的双反斜杠（\）替换为单反斜杠（/）或正斜杠（/，通常用于URL中）
vue ref的作用
GDBBader的博客
03-30 136
一、示例 <!-- `vm.$refs.p` will be the DOM node --> <p ref="p">hello</p> <!-- `vm.$refs.child` will be the child component instance --> <child-component ref="child"></child-component> 在HTML文件中单独使用vue时使用vm.$refs.child即定位了r
cracktree500数据集，路面裂缝检测数据集
1.总文件大小1.56G2.路面裂缝检测数据集3.链接提取
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值