在小程序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]);
});