获取到屏幕的宽度和高度,可以根据需要将这些值用于布局、样式或其他操作。
一、获取屏幕宽高
1.uniapp
使用uni.getSystemInfo()方法来获取系统信息,包括屏幕的宽度和高度。(注意:uni.getSystemInfo()方法是一个异步方法,因此你需要在success回调函数中处理获取到的屏幕尺寸数据。)
methods: {
getScreenSize() {
uni.getSystemInfo({
success: (res) => {
const screenWidth = res.windowWidth; // 屏幕宽度,单位为px
const screenHeight = res.windowHeight; // 屏幕高度,单位为px
console.log('屏幕宽度:', screenWidth);
console.log('屏幕高度:', screenHeight);
},
});
},
},
在需要获取屏幕宽度和高度的地方,调用getScreenSize()方法即可。
mounted() {
this.getScreenSize(); // 在组件或页面加载完成后调用获取屏幕尺寸的方法
},
2.vue
使用window.innerWidth和window.innerHeight获取屏幕的宽高:
const screenWidth = window.innerWidth; // 屏幕宽度
const screenHeight = window.innerHeight; // 屏幕高度
二、获取盒子内容宽高
1.uniap
使用uni.createSelectorQuery()方法来创建一个选择器查询对象,来获取盒子内容撑起的宽度和高度。(注意:uni.createSelectorQuery()方法是一个异步方法,因此你需要在boundingClientRect回调函数中处理获取到的盒子尺寸数据。)
methods: {
getBoxSize() {
uni.createSelectorQuery()
.select('.box') // 选择你要获取尺寸的盒子元素,这里假设盒子元素的class为box
.boundingClientRect((rect) => {
const boxWidth = rect.width; // 盒子的宽度,单位为px
const boxHeight = rect.height; // 盒子的高度,单位为px
console.log('盒子宽度:', boxWidth);
console.log('盒子高度:', boxHeight);
})
.exec();
},
},
在需要获取盒子宽度和高度的地方,调用getBoxSize()方法即可。
mounted() {
this.getBoxSize(); // 在组件或页面加载完成后调用获取盒子尺寸的方法
},
2.vue
在Vue组件中,通过this.$refs访问ref属性,并使用$el获取盒子元素的宽高:
<div ref="box" class="box"></div>
const boxWidth = this.$refs.box.$el.offsetWidth; // 盒子宽度
const boxHeight = this.$refs.box.$el.offsetHeight; // 盒子高度
console.log(boxWidth,boxHeight);