uni

2023-07-31 01:01| 来源: 网络整理| 查看: 265

我们知道uniapp中式没有window对象，和dom元素的，但是有时我们需要获取页面上节点的一些几何信息，以帮助我们完成业务和功能的实现，怎么办呢？

查阅官方文档：在这里插入图片描述接下来就来踩踩uniapp节点操作的坑吧

按照文档：写下如下代码，验证：

{{title}} export default { data() { return { } }, onLoad() { //页面初始化执行,用户页面获取参数 this.getInfo() }, onReady() { //页面初次渲染完毕执行 }, methods: { getInfo() { // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以 const query = uni.createSelectorQuery().in(this); query.select('#target').boundingClientRect(data => { console.log(data) }).exec(); } } }

查看效果：在这里插入图片描述拿到的值为空，why？我们知道在vue中要想拿到dom元素，需要在dom元素挂载到页面上才可以，也就是在mounted()生命周期中，同理在uniapp中需要在页面生命周期中onReady() 或者组件周期mounted()内获取才有效页面生命周期onLoad和onReady的区别：

onLoad() { //页面初始化执行,用户页面获取参数}, onReady() { //页面初次渲染完毕执行},

把上述代码中的this.getInfo()放在onReady()生命周期中：

{{title}} export default { data() { return { } }, onLoad() { //页面初始化执行,用户页面获取参数 }, onReady() { //页面初次渲染完毕执行 this.getInfo() }, methods: { getInfo() { // 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以 const query = uni.createSelectorQuery().in(this); query.select('#target').boundingClientRect(data => { console.log(data) }).exec(); } } }

效果：成功拿到该节点的集合信息，包括right,top,bottom,left,width,height 在这里插入图片描述

【本文地址】

公司简介

联系我们