小程序uniapp获取不同设备信息，与导航栏高度适配，盒子高度，scroll-view滚动

在小程序uniapp中，在onload生命周期中调用

uni.getSystemInfo({

        success: (e) => {
                }
 })

此方法用于获取用户不同设备信息

uni.getSystemInfo({
	success: (e) => {
		console.log(e);
		console.log('屏幕宽度', e.screenWidth);
		console.log('屏幕高度', e.screenHeight);
		console.log('可使用窗口宽度', e.windowWidth);
		console.log('可使用窗口高度', e.windowHeight);
		console.log('可使用窗口的顶部位置', e.windowTop);
		console.log('可使用窗口的底部位置', e.windowBottom);
		console.log('手机状态栏的高度', e.statusBarHeight);
	}
})

解决导航栏高度适配问题

同样在onload中调用uni.getMenuButtonBoundingClientRect()方法

会获取屏幕右上角胶囊的相关信息

获取胶囊位置信息
uni.getMenuButtonBoundingClientRect() 单位px
this.tabartop = uni.getMenuButtonBoundingClientRect().top // 胶囊到顶部的高度
this.tabarheight = uni.getMenuButtonBoundingClientRect().height  // 胶囊的高度

在需要的盒子上动态绑定高度，盒子的高度一般可以为胶囊的高度，距离顶部的距离为胶囊距离顶部的距离，或者盒子的高度为胶囊的高度加上胶囊距离顶部的高度

动态绑定高度:style="{height: tabarheight,marginTop:tabartop}"

获取某一个盒子或多个盒子的高度：

在 mounted() 生命周期中调用

获取多个共同class或id的盒子可以将select换成selectAll

一个盒子的高度
const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
	console.log("得到布局位置信息",data);
	console.log("元素的搞的" + data.height);
}).exec();

多个盒子的高度
const query = uni.createSelectorQuery().in(this);
    query.select('#tou').boundingClientRect()
    query.select('#footer').boundingClientRect()
	query.exec((data)=>{
	    console.log('得到布局位置信息=>',data);
			this.touheight=data[0].height
			this.footerheight=data[1].height
			console.log('this.touheight=>', this.touheight);
			console.log('this.footerheight=>', this.footerheight);
			// this.scrollheight=this.screenHeight
			// this.scrollheight=this.screenHeight-this.touheight
			this.scrollheight=this.screenHeight-this.touheight-this.footerheight +'px'
			console.log('this.scrollheight=>',this.scrollheight);
});

 动态设置scroll或是swiper的高度需要在下方里使用

query.exec((data)=>{
                console.log('得到布局位置信息=>',data);
                this.touheight=data[0].height

                // 第一个盒子的高度
                this.footerheight=data[1].height

                // 第二个盒子的高度
                this.scrollheight=this.screenHeight-this.touheight-this.footerheight +'px'

                // 单位 px 要带上，否则不生效
                console.log('this.scrollheight=>',this.scrollheight);
            });

scroll-view监听滚动

首先在scroll-view上绑定@scroll="scroll" 监听滚动

scroll(e){
        console.log(e.detail); //滚动信息

  }
            

同时可以配合以下来获取滚动时某个盒子的位置信息

const query = uni.createSelectorQuery().in(this);
query.select('#盒子id属性').boundingClientRect()
query.exec((data)=>{
        console.log('得到布局位置信息=>',data[0]);
 });