uniapp微信小程序获取屏幕宽高,胶囊按钮的位置以及Vue3.2在css层获取逻辑层的数据

最新推荐文章于 2024-06-20 14:48:20 发布

前端菜鸟好先森

最新推荐文章于 2024-06-20 14:48:20 发布

阅读量6.2k

点赞数 2

分类专栏： vue 文章标签：微信小程序 uni-app css

本文链接：https://blog.csdn.net/weixin_45308405/article/details/128345104

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

场景：在开发小程序时需要把使用了固定定位的按钮放在屏幕的中间，考虑了用 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