快捷導(dǎo)航

uniapp和vue如何獲取屏幕或盒子內(nèi)容的寬高

更新時間：2024年02月23日 14:59:04 作者：聰明的墨菲特?(o.O)?

在實(shí)際開發(fā)中我們會遇到不確定高度的情況,下面這篇文章主要給大家介紹了關(guān)于uniapp和vue如何獲取屏幕或盒子內(nèi)容的寬高,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、獲取屏幕寬高

1.uniapp

使用uni.getSystemInfo()方法來獲取系統(tǒng)信息，包括屏幕的寬度和高度。（注意：uni.getSystemInfo()方法是一個異步方法，因此你需要在success回調(diào)函數(shù)中處理獲取到的屏幕尺寸數(shù)據(jù)。）

methods: {
  getScreenSize() {
    uni.getSystemInfo({
      success: (res) => {
        const screenWidth = res.windowWidth; // 屏幕寬度，單位為px
        const screenHeight = res.windowHeight; // 屏幕高度，單位為px
        console.log('屏幕寬度：', screenWidth);
        console.log('屏幕高度：', screenHeight);
      },
    });
  },
},

在需要獲取屏幕寬度和高度的地方，調(diào)用getScreenSize()方法即可。

mounted() {
  this.getScreenSize(); // 在組件或頁面加載完成后調(diào)用獲取屏幕尺寸的方法
},

2.vue

使用window.innerWidth和window.innerHeight獲取屏幕的寬高：

const screenWidth = window.innerWidth; // 屏幕寬度
const screenHeight = window.innerHeight; // 屏幕高度

二、獲取盒子內(nèi)容寬高

1.uniap

使用uni.createSelectorQuery()方法來創(chuàng)建一個選擇器查詢對象，來獲取盒子內(nèi)容撐起的寬度和高度。（注意：uni.createSelectorQuery()方法是一個異步方法，因此你需要在boundingClientRect回調(diào)函數(shù)中處理獲取到的盒子尺寸數(shù)據(jù)。）

methods: {
  getBoxSize() {
    uni.createSelectorQuery()
      .select('.box') // 選擇你要獲取尺寸的盒子元素，這里假設(shè)盒子元素的class為box
      .boundingClientRect((rect) => {
        const boxWidth = rect.width; // 盒子的寬度，單位為px
        const boxHeight = rect.height; // 盒子的高度，單位為px
        console.log('盒子寬度：', boxWidth);
        console.log('盒子高度：', boxHeight);
      })
      .exec();
  },
},

在需要獲取盒子寬度和高度的地方，調(diào)用getBoxSize()方法即可。

mounted() {
  this.getBoxSize(); // 在組件或頁面加載完成后調(diào)用獲取盒子尺寸的方法
},

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);