How to dynamically set the height of swiper in uniapp

In many uniapp development projects, Swiper is a frequently used component. It provides a sliding view container that can easily implement functions such as picture carousel and advertising display. However, in actual projects, we often need to dynamically set the height of Swiper based on the height of the content to adapt to content changes. So, how to dynamically set the height of Swiper in uniapp?

1. Calculate the height of Swiper

In actual projects, we can include the Swiper component through another view container (such as div) to obtain the height required by Swiper. Add all the content contained in Swiper to the container and calculate the height, so that the height of Swiper can be dynamically set to adapt to content changes.

Sample code:

<template>
  <view>
    <div>
      <div>
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
      </div>
    </div>
  </view>
</template>
<script>
  export default {
    onReady() {
      this.calcHeight()
    },
    methods: {
      //计算高度
      calcHeight() {
        let _this = this
        setTimeout(() => {
          uni.createSelectorQuery()
            .in(this)
            .select(&#39;.swiper-container&#39;)
            .boundingClientRect((rect) => {
              _this.swiperHeight = rect.height
            })
            .exec()
        }, 200)
      }
    },
    data() {
      return {
        swiperHeight: 0
      }
    }
  }
</script>

<style>
  .swiper-container {
    height: {{swiperHeight}}px;
  }
</style>

In the above code, we first created the Swiper component in the template, and wrapped this component in a div container, and then in the Swiper container class Added a swiper-container style for setting the height of Swiper. Next, after the Swiper component is loaded, we use the uni.createSelectorQuery() function to get the height of the container and save it to the component's data (ie, the swiperHeight variable). Finally, we set the height of Swiper through variables in the style sheet to achieve the effect of dynamically setting the height.

2. Use custom instructions

In addition to the above method, you can also dynamically set the height of Swiper through the custom instructions provided by uniapp. First, use the v-swiper-height directive in the component and specify the container class name for which the height needs to be calculated. Then, we define an update function in the directive, in which we calculate the height required by Swiper, and use el.style.height to set the height of Swiper, thereby achieving the effect of dynamically setting the height.

Sample code:

<template>
  <swiper>
    <swiper-item>内容1</swiper-item>
    <swiper-item>内容2</swiper-item>
    <swiper-item>内容3</swiper-item>
  </swiper>
</template>
<script>
  export default {
    directives: {
      //自定义指令
      swiperHeight: {
        update(el, binding) {
          uni.createSelectorQuery()
            .in(this)
            .select(binding.value)
            .boundingClientRect((rect) => {
              el.style.height = rect.height + &#39;px&#39;
            })
            .exec()
        }
      }
    }
  }
</script>
<style>
  .my-swiper {
    height: auto;
  }
</style>

In the above code, we first create the Swiper component in the template and wrap this component in a custom container class (my-swiper). Then, we use the v-swiper-height directive and set the container class name parameter for which the height needs to be calculated. Next, in the directive, we define an update function. When the value bound to swiper-height changes, the update function is triggered. In this function, we get the height in the specified container through the uni.createSelectorQuery() function and set it to the height of Swiper.

To sum up, the above two methods can dynamically set the height of Swiper. They can choose a more suitable way to implement it according to the needs of the actual project.

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