uni-app元素节点操作-uni.createSelectorQuery()

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

查阅官方文档： 接下来就来踩踩uniapp节点操作的坑吧

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

<template> <view class="content"> <view class="text-area" style="position: relative;"> <text class="title" style="position: absolute;" id="target">{{title}}</text> </view> </view> </template> <script> 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(); } } } </script>

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

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

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

<template> <view class="content"> <view class="text-area" style="position: relative;"> <text class="title" style="position: absolute;" id="target">{{title}}</text> </view> </view> </template> <script> 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(); } } } </script>

效果：成功拿到该节点的集合信息，包括right,top,bottom,left,width,height