场景:在开发小程序时需要把使用了固定定位的按钮放在屏幕的中间,考虑了用 vw vh % 但是还要减去按钮宽的一半,所以在这里不适用。以下是uniapp中自带的获取屏幕的高宽等数据,我在这里顺便记录一些其他小知识
1.使用uni.getWindowInfo()
uniapp官网介绍: uni.getWindowInfo()
uni.getWindowInfo() 使用:
// 获取窗口信息
let getWindowInfo = uni.getWindowInfo()
console.log(getWindowInfo.screenHeight);//屏幕高度
console.log(getWindowInfo.screenWidth);//屏幕宽度
console.log(getWindowInfo.windowHeight);//可操作页面高度
console.log(getWindowInfo.windowWidth);//可操作页面宽度
console.log(getWindowInfo);
console.log('获取窗口信息');
uni.getSystemInfo() 使用:
// 系统信息的概念
uni.getSystemInfo({
success: res => {
console.log(res);
console.log(res.screenHeight);//屏幕高度
console.log(res.screenWidth);//屏幕宽度
console.log(res.windowHeight);//可操作页面高度
console.log(res.windowWidth);//可操作页面宽度
}
})
项目中应用场景还原:
逻辑层代码:
const screenWidths = ref<string>(uni.getWindowInfo().screenWidth - 180 + 'rpx')
css层代码:
.add-address {
position: fixed;
bottom: 80rpx;
left: v-bind(screenWidths);
width: 360rpx;
height: 72rpx;
background: #101010;
border-radius: 36rpx;
font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 72rpx;
text-align: center;
}
实现效果:
v-bind介绍
是vue3.2中增加了一个style v-bind的特性,简单来说就是把我们script中的数据可以在style标签中使用
2.获取胶囊按钮的位置信息 getMenuButtonBoundingClientRect()
uniapp官网介绍: getMenuButtonBoundingClientRect()
getMenuButtonBoundingClientRect() 使用
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
console.log(menuButtonInfo.width) //宽度,单位:px
console.log(menuButtonInfo.height) //高度,单位:px
console.log(menuButtonInfo.top) //上边界坐标,单位:px
console.log(menuButtonInfo.right) //右边界坐标,单位:px
console.log(menuButtonInfo.bottom) //下边界坐标,单位:px
console.log(menuButtonInfo.left) //左边界坐标,单位:px