uniapp js sets element size

With the increasing popularity of mobile applications, front-end developers need to set different element sizes for different mobile devices. Using uniapp js to set element size is a very effective method. This article will introduce how to set element size using uniapp js.

1. Use components and styles to set element sizes

In uniapp, we can use components and styles to set element sizes. For example, we can use the view component to create a container, and then use the width and height properties to set the size of the container, as shown below:

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

In this example, we use the view component to create a container and pass The style attribute sets the width and height of the container to 200px respectively.

2. Use js to set the element size

In addition to using components and styles to set the element size, we can also use js to dynamically set the element size. uniapp provides us with some methods to implement this function, as shown below:

1. uni.createSelectorQuery().select()

This method is used to obtain the specified element Information, including size information such as the width and height of the element. We can use this information to dynamically calculate and set the size of the element.

The following is an example. In this example, we use the uni.createSelectorQuery().select() method to obtain the width and height information of the h1 element, and set the width and height of the h2 element so that h2 The dimensions of the element are the same as the h1 element.

<template>
  <view class="container">
    <h1 id="title">Hello World</h1>
    <h2 id="subtitle">Subtitle</h2>
  </view>
</template>

<script>
  export default {
    onReady() {
      uni.createSelectorQuery().select('#title').boundingClientRect(rect => {
        uni.createSelectorQuery().select('#subtitle').boundingClientRect(subRect => {
          uni.createSelectorQuery().select('#subtitle').fields({ size: true }, size => {
            this.$nextTick(() => {
              uni.createSelectorQuery().select('#subtitle').boundingClientRect(newRect => {
                const scale = rect.width / newRect.width
                uni.createSelectorQuery().select('#subtitle').boundingClientRect(scaleRect => {
                  uni.createSelectorQuery().select('#subtitle').fields({ size: true }, subSize => {
                    const newHeight = subSize.height * scale
                    uni.createSelectorQuery().select('#subtitle').boundingClientRect(() => {
                      uni.$set(this, 'subtitleStyle',
                        `transform:translate(-50%,-50%)scale(${scale}); width:${subRect.width}px; height:${newHeight}px;`
                      )
                    }).exec()
                  }).exec()
                }).exec()
              }).exec()
            })
          }).exec()
        }).exec()
      }).exec()
    }
  }
</script>

In this example, we first obtain the width and height information of the h1 element, then obtain the width and height information of the h2 element, and calculate the scaling ratio and the new height of the h2 element. Finally, we update the component's subtitleStyle property using the uni.$set method to apply the scale, width, and height to the h2 element.

2. uni.$nextTick()

This method is used to perform DOM operations before the next update cycle. Because uniapp's data binding is asynchronous, if we need to wait for the next update cycle to obtain element information, we need to use this method.

In the previous example, we used the uni.$nextTick() method to wait for the element to be updated. Here is another example. We use vue's v-if directive to control the display and hiding of elements, and at the same time use the uni.$nextTick() method to wait for the element to be updated.

<template>
  <view>
    <button @click="toggle">Toggle</button>
    <view v-show="show" ref="box" style="width: 200px; height: 200px; background-color: #ccc;"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    },
    methods: {
      toggle() {
        this.show = !this.show
        uni.$nextTick(() => {
          const { width, height } = this.$refs.box.$el.getBoundingClientRect()
          console.log(width, height)
        })
      }
    }
  }
</script>

In this example, we use vue's v-show instruction to control the display and hiding of elements, and use the uni.$nextTick() method to wait for the element to be updated. When we click the Toggle button, control the value of the show attribute, and then use the uni.$nextTick() method to obtain the width and height information of the element.

In short, in uniapp, we can use components, styles and js methods to set element sizes. These three methods have their own advantages and disadvantages, and we can choose the appropriate method according to actual needs and situations.

The above is the detailed content of uniapp js sets element size. For more information, please follow other related articles on the PHP Chinese website!