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

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序获取屏幕宽高,胶囊按钮的位置以及Vue3.2在css层获取逻辑层的数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

实现效果：

uniapp微信小程序获取屏幕高度,vue,微信小程序,uni-app,css

v-bind介绍

是vue3.2中增加了一个style v-bind的特性，简单来说就是把我们script中的数据可以在style标签中使用

2.获取胶囊按钮的位置信息 getMenuButtonBoundingClientRect()

uniapp官网介绍： getMenuButtonBoundingClientRect()

getMenuButtonBoundingClientRect() 使用文章来源地址https://www.toymoban.com/news/detail-520346.html

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

到了这里，关于uniapp微信小程序获取屏幕宽高,胶囊按钮的位置以及Vue3.2在css层获取逻辑层的数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！