Bagaimana untuk menetapkan ketinggian swiper secara dinamik dalam uniapp

Swiper ialah komponen yang kerap digunakan dalam banyak projek pembangunan uniapp. Ia menyediakan bekas paparan gelongsor yang boleh melaksanakan fungsi dengan mudah seperti karusel imej dan paparan pengiklanan. Walau bagaimanapun, dalam projek sebenar, kita selalunya perlu menetapkan ketinggian Swiper secara dinamik mengikut ketinggian kandungan untuk menyesuaikan diri dengan perubahan kandungan. Jadi, bagaimana untuk menetapkan ketinggian Swiper secara dinamik dalam uniapp?

1. Kira ketinggian Swiper

Dalam projek sebenar, kita boleh memasukkan komponen Swiper melalui bekas paparan lain (seperti div) untuk mendapatkan ketinggian Swiper yang diperlukan. Tambahkan semua kandungan yang terkandung dalam Swiper pada bekas dan kira ketinggian, supaya ketinggian Swiper boleh ditetapkan secara dinamik untuk menyesuaikan diri dengan perubahan kandungan.

Kod contoh:

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

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

Dalam kod di atas, kami mula-mula mencipta komponen Swiper dalam templat dan bungkus komponen ini dalam bekas div, dan kemudian dalam bekas Swiper A swiper- gaya bekas ditambahkan pada kelas untuk menetapkan ketinggian Swiper. Seterusnya, selepas komponen Swiper dimuatkan, kami memperoleh ketinggian bekas dan menyimpannya ke data komponen (iaitu, pembolehubah swiperHeight) dengan menggunakan fungsi uni.createSelectorQuery(). Akhir sekali, kami menetapkan ketinggian Swiper melalui pembolehubah dalam helaian gaya untuk mencapai kesan menetapkan ketinggian secara dinamik.

2. Gunakan arahan tersuai

Selain kaedah di atas, anda juga boleh menetapkan ketinggian Swiper secara dinamik melalui arahan tersuai yang disediakan oleh uniapp. Mula-mula, gunakan arahan v-swiper-height dalam komponen dan nyatakan nama kelas kontena yang ketinggiannya perlu dikira. Kemudian, kami mentakrifkan fungsi kemas kini dalam arahan, di mana kami mengira ketinggian yang diperlukan oleh Swiper dan menggunakan el.style.height untuk menetapkan ketinggian Swiper, dengan itu mencapai kesan menetapkan ketinggian secara dinamik.

Kod sampel:

<template>
  <swiper class="my-swiper" v-swiper-height=".my-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 + 'px'
            })
            .exec()
        }
      }
    }
  }
</script>
<style>
  .my-swiper {
    height: auto;
  }
</style>

Dalam kod di atas, kami mula-mula mencipta komponen Swiper dalam templat dan membalut komponen ini dalam kelas bekas tersuai (my-swiper) tengah. Kemudian, kami menggunakan arahan v-swiper-height dan menetapkan parameter nama kelas kontena yang ketinggiannya perlu dikira. Seterusnya, dalam arahan, kami mentakrifkan fungsi kemas kini Apabila nilai terikat kepada ketinggian leret berubah, fungsi kemas kini dicetuskan. Dalam fungsi ini, kita mendapat ketinggian dalam bekas yang ditentukan melalui fungsi uni.createSelectorQuery() dan menetapkannya kepada ketinggian Swiper.

Ringkasnya, dua kaedah di atas boleh menetapkan ketinggian Swiper secara dinamik Mereka boleh memilih cara yang lebih sesuai untuk melaksanakannya mengikut keperluan projek sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian swiper secara dinamik dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!