uniapp和vue如何获取屏幕或盒子内容的宽高

赖开得

获取到屏幕的宽度和高度，可以根据需要将这些值用于布局、样式或其他操作。

一、获取屏幕宽高


1.uniapp

使用uni.getSystemInfo()方法来获取系统信息，包括屏幕的宽度和高度。（注意：uni.getSystemInfo()方法是一个异步方法，因此你需要在success回调函数中处理获取到的屏幕尺寸数据。）

1. methods: {
   
2.   getScreenSize() {
   
3.     uni.getSystemInfo({
   
4.       success: (res) => {
   
5.         const screenWidth = res.windowWidth; // 屏幕宽度，单位为px
   
6.         const screenHeight = res.windowHeight; // 屏幕高度，单位为px
   
7.         console.log('屏幕宽度：', screenWidth);
   
8.         console.log('屏幕高度：', screenHeight);
   
9.       },
   
10.     });
    
11.   },
    
12. },

复制代码

在需要获取屏幕宽度和高度的地方，调用getScreenSize()方法即可。

1. mounted() {
   
2.   this.getScreenSize(); // 在组件或页面加载完成后调用获取屏幕尺寸的方法
   
3. },

复制代码

2.vue

使用window.innerWidth和window.innerHeight获取屏幕的宽高：

1. const screenWidth = window.innerWidth; // 屏幕宽度
   
2. const screenHeight = window.innerHeight; // 屏幕高度

复制代码

二、获取盒子内容宽高


1.uniap

使用uni.createSelectorQuery()方法来创建一个选择器查询对象，来获取盒子内容撑起的宽度和高度。（注意：uni.createSelectorQuery()方法是一个异步方法，因此你需要在boundingClientRect回调函数中处理获取到的盒子尺寸数据。）

1. methods: {
   
2.   getBoxSize() {
   
3.     uni.createSelectorQuery()
   
4.       .select('.box') // 选择你要获取尺寸的盒子元素，这里假设盒子元素的class为box
   
5.       .boundingClientRect((rect) => {
   
6.         const boxWidth = rect.width; // 盒子的宽度，单位为px
   
7.         const boxHeight = rect.height; // 盒子的高度，单位为px
   
8.         console.log('盒子宽度：', boxWidth);
   
9.         console.log('盒子高度：', boxHeight);
   
10.       })
    
11.       .exec();
    
12.   },
    
13. },

复制代码

在需要获取盒子宽度和高度的地方，调用getBoxSize()方法即可。

1. mounted() {
   
2.   this.getBoxSize(); // 在组件或页面加载完成后调用获取盒子尺寸的方法
   
3. },

复制代码

2.vue

在Vue组件中，通过this.$refs访问ref属性，并使用$el获取盒子元素的宽高：

1. <div ref="box" class="box"></div>
   
2. 
   
3. const boxWidth = this.$refs.box.$el.offsetWidth; // 盒子宽度
   
4. const boxHeight = this.$refs.box.$el.offsetHeight; // 盒子高度
   
5. 
   
6. console.log(boxWidth,boxHeight);

复制代码

总结

到此这篇关于uniapp和vue如何获取屏幕或盒子内容宽高的文章就介绍到这了,更多相关uniapp和vue获取屏幕内容宽高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3162268dp.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！