場景：在開發(fā)小程序時需要把使用了固定定位的按鈕放在屏幕的中間，考慮了用?vw ?vh ?% 但是還要減去按鈕寬的一半，所以在這里不適用。以下是uniapp中自帶的獲取屏幕的高寬等數(shù)據(jù)，我在這里順便記錄一些其他小知識

1.使用uni.getWindowInfo()?

uniapp官網(wǎng)介紹:?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() 使用：

           // 系統(tǒng)信息的概念
			uni.getSystemInfo({
				success: res => {
					console.log(res);
					console.log(res.screenHeight);//屏幕高度
					console.log(res.screenWidth);//屏幕寬度
					console.log(res.windowHeight);//可操作頁面高度
					console.log(res.windowWidth);//可操作頁面寬度
				}
			})

項目中應(yīng)用場景還原：

邏輯層代碼：

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;
}

實現(xiàn)效果：

?v-bind介紹

是vue3.2中增加了一個style v-bind的特性，簡單來說就是把我們script中的數(shù)據(jù)可以在style標簽中使用

2.獲取膠囊按鈕的位置信息?getMenuButtonBoundingClientRect()? ?

uniapp官網(wǎng)介紹：?getMenuButtonBoundingClientRect()

getMenuButtonBoundingClientRect() 使用文章來源地址http://www.zghlxwxcb.cn/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

到了這里，關(guān)于uniapp微信小程序獲取屏幕寬高,膠囊按鈕的位置以及Vue3.2在css層獲取邏輯層的數(shù)據(jù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！