uniapp createSelectorQuery获取组件的宽高、offsetWidth等

https://uniapp.dcloud.net.cn/api/ui/nodes-info.html#nodesrefboundingclientrect

uni.createSelectorQuery()

返回一个 SelectorQuery 对象实例。可以在这个实例上使用 select 等方法选择节点，并使用 boundingClientRect 等方法选择需要查询的信息。

Tips:

• 使用 uni.createSelectorQuery() 需要在生命周期 mounted 后进行调用。
• 默认需要使用到 selectorQuery.in 方法。

# SelectorQuery

查询节点信息的对象

# selectorQuery.in(component)

将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到布局位置信息" + JSON.stringify(data));
  console.log("节点离页面顶部的距离为" + data.top);
}).exec();

注意

• 支付宝小程序不支持in(component)，使用无效果

# selectorQuery.select(selector)

在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

selector 说明：

selector 类似于 CSS 的选择器，但仅支持下列语法。

• ID选择器：#the-id
• class选择器（可以连续指定多个）：.a-class.another-class
• 子元素选择器：.the-parent > .the-child
• 后代选择器：.the-ancestor .the-descendant
• 跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
• 多选择器的并集：#a-node, .some-other-nodes

# selectorQuery.selectAll(selector)

在当前页面下选择匹配选择器 selector 的所有节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。

# selectorQuery.selectViewport()

选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个 NodesRef 对象实例。

# selectorQuery.exec(callback)

执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。

 

export default {    
        data() {
            return {
                temp :';padding-top: 150px;padding-left: 0px;padding-bottom: 17px;padding-right: 0px;background-color: #F5F6F8;background-attachment: scroll;',
                screenHeight: 0, //屏幕高度
                statusBarHeight: 0, //状态栏高度高度
                info: [],//展示的列表数据
                isLoading: false, //防止频繁触发
                bottomDistinct:200//距离底部多少像素时触发
            }
        },
        onLoad() {
            //页面初始化执行,用户页面获取参数
        },
        onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
            //console.log("滚动距离为：" + e.scrollTop + "，屏幕高度为：" + this.screenHeight);
            //如果设置的事件触发距离 大于等于 (节点的高度-屏幕高度-滚动条到顶部的距离)
            if(e.scrollTop > 30)
            {
                console.log("滚动大于30 -----------------------------");
                this.temp =';padding-top: 150px;padding-left: 0px;padding-bottom: 17px;padding-right: 0px;background-color: #F5F6F8;background-attachment: scroll;';
            }else{
                //this.temp =';padding-top: 110px;';
            }
            
            
        
        },
        methods: {
        getInfo() {
        
                        let info = uni.createSelectorQuery().in(this).select("#hyb");
                                            info.boundingClientRect(function(data) { //data - 各种参数
                                            console.log("得到布局位置信息" + JSON.stringify(data));
                                                console.log("data.height>" +data.height); // 获取元素宽度
                                                 
                                                  console.log("节点离页面顶部的距离为" + data.top);
                                                //_this.domHeight = data.height;
                                            }).exec();
        
                    }
        },
        onReady() { //页面初次渲染完毕执行
                    this.getInfo()
        },
        mounted()
        {
            
            
            //页面加载时取得屏幕高度
            uni.getSystemInfoSync({
                success:(e)=> {    
                this.screenHeight = e.screenHeight;                
                this.statusBarHeight = e.statusBarHeight;
                
                // let info = uni.createSelectorQuery().select(".hyb-search-bar");
                //                     info.boundingClientRect(function(data) { //data - 各种参数
                //                         console.log(data) // 获取元素宽度
                //                         //_this.domHeight = data.height;
                //                     }).exec()    
                
            
                
              }
            })
            
        }
    }