在做弹框的时候，如果是从top、bottom出来，会自动填满宽度，但是从center出来，就只是内容大小。怎么样给父级设置宽度也没用。如果设置固定值，就不能做到自适应。尝试过用vue的方法，但是不成功，用微信小程序的方法会在编译的时候报错 ，虽然运行的时候没问题。
走了很多弯路，才发现其实uniapp有这个接口，隐藏得比较深。其实也有些惯性思维的原因，不应该跨过框架本身的接口去找其他方法。
获取系统信息：
screenWidth 屏幕宽度
screenHeight 屏幕高度
windowWidth 可使用窗口宽度
windowHeight 可使用窗口高度
windowTop 可使用窗口的顶部位置 App、H5
windowBottom 可使用窗口的底部位置 App、H5
statusBarHeight 状态栏的高
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);
}
});
示例
设置弹框宽度为屏幕的80%
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
错：30080%
对： 300
0.8
获取元素的宽度、高度、定位
可以获得如下信息：
bottom:
dataset，如ref
proto:
height:
id
left:
right:
top:
// uniapp的方法
uni.getSystemInfo({
success: function (res){ // res - 各种参数
let obj = uni.createSelectorQuery().select('.类名')
obj.boundingClientRect(function (data){ // data - 各种参数
console.log(data)
}).exec()
}
})