在做彈框的時候捞镰，如果是從top、bottom出來毙替，會自動填滿寬度岸售，但是從center出來，就只是內(nèi)容大小厂画。怎么樣給父級設(shè)置寬度也沒用凸丸。如果設(shè)置固定值，就不能做到自適應(yīng)袱院。嘗試過用vue的方法屎慢，但是不成功，用微信小程序的方法會在編譯的時候報錯 忽洛，雖然運行的時候沒問題腻惠。
走了很多彎路，才發(fā)現(xiàn)其實uniapp有這個接口欲虚，隱藏得比較深集灌。其實也有些慣性思維的原因，不應(yīng)該跨過框架本身的接口去找其他方法复哆。
uni.getSystemInfo(OBJECT)
獲取系統(tǒng)信息：
- screenWidth 屏幕寬度
- screenHeight 屏幕高度
- windowWidth 可使用窗口寬度
- windowHeight 可使用窗口高度
- windowTop 可使用窗口的頂部位置 App欣喧、H5
- windowBottom 可使用窗口的底部位置 App、H5
- statusBarHeight 狀態(tài)欄的高
uni.getSystemInfo({
success: function (res) {
console.log(res.model);
console.log(res.pixelRatio);
console.log(res.windowWidth);
console.log(res.windowHeight);
console.log(res.language);
console.log(res.version);
console.log(res.platform);
}
});
示例
設(shè)置彈框?qū)挾葹槠聊坏?0%
<view class="set-plan-block" :style="{ 'width': setWidth + 'px' }">
export default {
data () {
return {
setWidth: 0
}
mounted () {
this.$refs.setPlan.open()
// 注意梯找，這里要用個變量存this唆阿，不然進到getSystemInfo后this指向會變化，找不到data變量
var _this = this
uni.getSystemInfo({
success: function (res) {
_this.setWidth = res.windowWidth * 0.8
}
})
},
注意：計算表達式不能用 80%（會報錯）锈锤，要用0.8
錯：300 * 80%
對： 300 * 0.8
獲取元素的寬度驯鳖、高度饰躲、定位
可以獲得如下信息：
- bottom:
- dataset，如ref
- proto:
- height:
- id
- left:
- right:
- top:
- width:
// uniapp的方法
uni.getSystemInfo({
success: function (res) { // res - 各種參數(shù)
let obj = uni.createSelectorQuery().select('.類名')
obj.boundingClientRect(function (data) { // data - 各種參數(shù)
console.log(data)
}).exec()
}
})
