How to set the height for swiper in uniapp

In mobile application development, the carousel is one of the most common components and one of the most common elements in the user interface. When using uniapp to develop mobile applications, you can use the swiper component to implement carousel charts. However, sometimes it is found that in some cases, the height of the swiper component cannot be automatically adapted, resulting in incomplete display of the carousel. In response to this situation, this article will introduce how to solve this problem by setting the height of the swiper component in uniapp.

1. Basic usage of swiper component

Before understanding how to set the height of swiper component, let’s review the basic usage of swiper component. The swiper component is a carousel component in uniapp, which can realize automatic carousel and manual switching between multiple pictures. The specific usage method is as follows:

1. Introduce the swiper component

Introduce the swiper component into the page, for example in the index.vue file:

<template>
  <view>
    <swiper>
      <swiper-item>
        <image src="xxx"></image>
      </swiper-item>
      <swiper-item>
        <image src="xxx"></image>
      </swiper-item>
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index'
    // ...
  }
</script>

2. Configure the parameters of the swiper component

The swiper component supports a variety of configuration parameters, including automatic rotation interval, whether to display indicator points, whether to loop playback, etc. In the above code, we just used the default configuration. If you need to customize the configuration parameters, you can add attributes to the swiper component, for example:

<swiper autoplay="{{true}}" interval="{{5000}}" loop="{{true}}">

This way you can achieve automatic carousel and display of each picture. The time is 5 seconds, loop playback and other functions.

2. Set the height of the swiper component

When using the swiper component, if the height is not set, its height will default to 0, causing the carousel image to be unable to be displayed. Normally, we can use flex layout to make the height of the swiper component adaptive. For example:

<template>
  <view class="container">
    <swiper class="swiper">
      ...
    </swiper>
  </view>
</template>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-item: center;
    height: 100%; /* 设置容器的高度为100% */
  }
  .swiper {
    width: 100%;
    height: 100%;
  }
</style>

By setting the height of the swiper component to 100%, the height of the swiper component can be adapted to the height of the parent container, thus Achieve normal display of carousel images.

It should be noted that in some cases, the above method may not solve the problem. For example, in some areas of the page, other components occupy the height, causing the swiper component to not be fully displayed. At this time, you can consider using the method of calculating the swiper height to solve the problem.

1. Use the onReady function

In the life cycle function of the Vue component, the onReady function is a function that is executed immediately after the component is rendered. Therefore, we can calculate the height of the swiper component in the onReady function and assign the calculated height to the style attribute of the swiper component. For example:

<template>
  <view>
    <swiper :style="swiperStyle">
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index',
    data () {
      return {
        swiperHeight: 0
      }
    },
    computed: {
      swiperStyle () {
        return {
          height: this.swiperHeight + 'px'
        }
      }
    },
    onReady () {
      // 计算swiper组件的高度
      const query = uni.createSelectorQuery().in(this)
      query.select('.swiper').boundingClientRect(data => {
        this.swiperHeight = data.height
      }).exec()
    }
  }
</script>

In the above code, we use the createSelectorQuery function provided by uniapp to obtain the height of the swiper component. In the onReady function, we calculate the height of the swiper component and assign the calculated height to the style attribute of the swiper component, thus realizing the adaptive height of the swiper component.

2. Use watch listening function

In addition to using the onReady function, you can also use the watch function in the Vue component to monitor changes in the height of the swiper component, and change the height when Dynamically update the style of the swiper component. For example:

<template>
  <view>
    <swiper :style="swiperStyle">
      ...
    </swiper>
  </view>
</template>

<script>
  export default {
    name: 'Index',
    data () {
      return {
        swiperHeight: 0
      }
    },
    computed: {
      swiperStyle () {
        return {
          height: this.swiperHeight + 'px'
        }
      }
    },
    watch: {
      swiperHeight (val) {
        this.$nextTick(() => {
          this.$refs['swiper'].$el.style.height = val + 'px'
        })
      }
    },
    methods: {
      getSwiperHeight () {
        const query = uni.createSelectorQuery().in(this)
        query.select('.swiper').boundingClientRect(data => {
          this.swiperHeight = data.height
        }).exec()
      }
    },
    mounted () {
      this.getSwiperHeight()
      uni.$on('resize', this.getSwiperHeight)
    },
    beforeDestroy () {
      uni.$off('resize', this.getSwiperHeight)
    }
  }
</script>

In the above code, we define a swiperHeight variable to save the height of the swiper component. In the watch function, we monitor changes in the swiperHeight variable and use the $nextTick function to refresh the style of the swiper component when it changes to achieve dynamic updates of height. In order to obtain the height of the swiper component, we use the getSwiperHeight function, and after the page is mounted and before the component is destroyed, we call the $on and $off functions provided by uniapp to monitor and release the resize event to dynamically update the swiper when the window size changes. Component height functionality.

3. Summary

This article introduces how to set the height for the swiper component in uniapp. If you find that the height cannot be adapted when using the swiper component, you can try to use flex layout, onReady function or watch function to solve the problem. Using these methods is relatively simple and requires only some basic knowledge of Vue lifecycle functions and style layout. I hope the methods introduced in this article will be helpful to you in uniapp development.

The above is the detailed content of How to set the height for swiper in uniapp. For more information, please follow other related articles on the PHP Chinese website!