Vue.js Uniapp 获取屏幕、元素的高度宽度

在做弹框的时候,如果是从top、bottom出来,会自动填满宽度,但是从center出来,就只是内容大小。怎么样给父级设置宽度也没用。如果设置固定值,就不能做到自适应。尝试过用vue的方法,但是不成功,用微信小程序的方法会在编译的时候报错 ,虽然运行的时候没问题。

走了很多弯路,才发现其实uniapp有这个接口,隐藏得比较深。其实也有些惯性思维的原因,不应该跨过框架本身的接口去找其他方法。

uni.getSystemInfo(OBJECT)

获取系统信息:

  • screenWidth 屏幕宽度
  • screenHeight 屏幕高度
  • windowWidth 可使用窗口宽度
  • windowHeight 可使用窗口高度
  • windowTop 可使用窗口的顶部位置 App、H5
  • windowBottom 可使用窗口的底部位置 App、H5
  • statusBarHeight 状态栏的高
1
2
3
4
5
6
7
8
9
10
11
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%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// uniapp的方法
uni.getSystemInfo({
success: function (res) { // res - 各种参数
let obj = uni.createSelectorQuery().select('.类名')
obj.boundingClientRect(function (data) { // data - 各种参数
console.log(data)
}).exec()
}
})

Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker


Vue.js Uniapp 获取屏幕、元素的高度宽度

本文原创自http://laker.me/blog,转载请注明出处,欢迎交换友链

如果本文对您有帮助,微信扫一扫,请我吃个鸡腿吧