How to modify the width and height of elements in uniapp

With the continuous development of mobile applications, more and more developers are beginning to use the Uniapp framework to quickly build cross-platform applications. In Uniapp, we often need to adjust the styles of elements on the page, and the width and height of the elements are a basic style attribute. This article will introduce how to modify the width and height of elements in Uniapp, so that you can use this framework more skillfully.

1. Use the style attribute to set the element width and height

In Uniapp, each page is composed of a vue file. We can use the style attribute in the file to Set the width and height of the element. For example:

<template>
  <view class="container">
    <view class="box" style="width: 200px; height: 100px;"></view>
  </view>
</template>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  
  .box {
    background-color: red;
  }
</style>

In the above example, we use a view element to represent a box, and set its width and height to 200px and 100px respectively. What needs to be noted here is that the value of the style attribute needs to be enclosed in double quotes or single quotes.

2. Use class names to set element width and height

In actual development, we often need to set the same width and height for a group of elements. In this case, we can use class names to set. For example:

<template>
  <view class="container">
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
  </view>
</template>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  
  .box {
    background-color: red;
    width: 200px;
    height: 100px;
  }
</style>

In the above example, we used three view elements to represent three boxes, added a class name box to them, and set the class name represented in the style. The width and height of the element.

3. Use calculated attributes to set the width and height of elements

Sometimes, we need to dynamically calculate the width and height of elements based on changes in page layout. In this case, we can use Uniapp Computed properties are implemented. For example:

<template>
  <view :style="{ width: boxWidth, height: boxHeight }"></view>
</template>

<script>
  export default {
    data() {
      return {
        boxWidth: '200px',
        boxHeight: '100px'
      }
    },
    
    computed: {
      boxSize() {
        if (this.$uni.getSystemInfoSync().windowWidth > 750) {
          return {
            width: '400px',
            height: '200px'
          }
        } else {
          return {
            width: '200px',
            height: '100px'
          }
        }
      }
    },
    
    watch: {
      boxSize(newValue, oldValue) {
        this.boxWidth = newValue.width;
        this.boxHeight = newValue.height;
      }
    }
  }
</script>

In the above example, we used Uniapp’s calculated properties to calculate the width and height of the box. When the window width is greater than 750px, we set the width and height of the box to 400px and 200px, otherwise set it to 200px and 100px. When the calculated property boxSize changes, we use watch to listen for the change and assign the new width and height to boxWidth and boxHeight respectively.

Summary

In Uniapp, we can use the style attribute, class name and calculated attribute to set the width and height of the element. Depending on different needs, we can flexibly choose which method to use. Skilled use of width and height adjustments can make your page layout more decent and beautiful.

The above is the detailed content of How to modify the width and height of elements in uniapp. For more information, please follow other related articles on the PHP Chinese website!