Bagaimana untuk menetapkan ketinggian untuk swiper dalam uniapp

Dalam pembangunan aplikasi mudah alih, karusel ialah salah satu komponen yang paling biasa dan salah satu elemen yang paling biasa dalam antara muka pengguna. Apabila menggunakan uniapp untuk membangunkan aplikasi mudah alih, anda boleh menggunakan komponen swiper untuk melaksanakan carta karusel. Walau bagaimanapun, kadangkala didapati bahawa dalam beberapa kes, ketinggian komponen leret tidak boleh disesuaikan secara automatik, menyebabkan paparan karusel tidak lengkap. Sebagai tindak balas kepada situasi ini, artikel ini akan memperkenalkan cara menyelesaikan masalah ini dengan menetapkan ketinggian komponen swiper dalam uniapp.

1. Penggunaan asas komponen swiper

Sebelum memahami cara menetapkan ketinggian komponen swiper, mari semak penggunaan asas komponen swiper. Komponen swiper ialah komponen karusel dalam uniapp, yang boleh merealisasikan karusel automatik dan penukaran manual antara berbilang gambar. Penggunaan khusus adalah seperti berikut:

1. Perkenalkan komponen swiper

Perkenalkan komponen swiper ke dalam halaman, contohnya dalam fail index.vue:

<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. Mengkonfigurasi parameter komponen swiper

Komponen leret menyokong pelbagai parameter konfigurasi, termasuk selang putaran automatik, sama ada untuk memaparkan titik penunjuk, sama ada untuk menggelung main balik, dll. Dalam kod di atas, kami hanya menggunakan konfigurasi lalai Jika anda perlu menyesuaikan parameter konfigurasi, anda boleh menambah atribut pada komponen swiper, contohnya:

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

Dengan cara ini anda boleh mencapai karusel automatik, setiap gambar Masa paparan ialah 5 saat, main balik gelung dan fungsi lain.

2. Tetapkan ketinggian komponen swiper

Apabila menggunakan komponen swiper, jika anda tidak menetapkan ketinggian, ketinggiannya akan lalai kepada 0, menyebabkan imej karusel tidak dapat dipaparkan. Biasanya, kita boleh menggunakan susun atur flex untuk menjadikan ketinggian komponen swiper adaptif, contohnya:

<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>

Dengan menetapkan ketinggian komponen swiper kepada 100%, ketinggian komponen swiper boleh disesuaikan kepada ketinggian bekas induk , dengan itu mencapai paparan biasa imej karusel.

Perlu diambil perhatian bahawa dalam beberapa kes, kaedah di atas mungkin tidak menyelesaikan masalah Sebagai contoh, dalam sesetengah kawasan halaman, komponen lain menduduki ketinggian, menyebabkan komponen swiper tidak dipaparkan sepenuhnya. Pada masa ini, anda boleh mempertimbangkan untuk menggunakan kaedah pengiraan ketinggian swiper untuk menyelesaikan masalah.

1. Gunakan fungsi onReady

Dalam fungsi kitaran hayat komponen Vue, fungsi onReady ialah fungsi yang dilaksanakan sejurus selepas komponen itu dipaparkan. Oleh itu, kita boleh mengira ketinggian komponen swiper dalam fungsi onReady dan menetapkan ketinggian yang dikira kepada atribut gaya komponen swiper. Contohnya:

<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>

Dalam kod di atas, kami menggunakan fungsi createSelectorQuery yang disediakan oleh uniapp untuk mendapatkan ketinggian komponen swiper. Dalam fungsi onReady, kami mengira ketinggian komponen swiper dan menetapkan ketinggian yang dikira kepada atribut gaya komponen swiper, dengan itu merealisasikan ketinggian penyesuaian komponen swiper.

2. Gunakan fungsi mendengar jam tangan

Selain menggunakan fungsi onReady, anda juga boleh menggunakan fungsi jam tangan dalam komponen Vue untuk mendengar perubahan ketinggian komponen swiper dan tukar ketinggian apabila Mengemas kini gaya komponen swiper secara dinamik. Contohnya:

<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>

Dalam kod di atas, kami mentakrifkan pembolehubah swiperHeight untuk menyimpan ketinggian komponen swiper. Dalam fungsi jam tangan, kami memantau perubahan dalam pembolehubah swiperHeight dan menggunakan fungsi $nextTick untuk menyegarkan gaya komponen swiper apabila ia berubah untuk mencapai kemas kini ketinggian dinamik. Untuk mendapatkan ketinggian komponen swiper, kami menggunakan fungsi getSwiperHeight, dan selepas halaman dipasang dan sebelum komponen dimusnahkan, kami memanggil fungsi $on dan $off yang disediakan oleh uniapp untuk memantau dan melepaskan acara ubah saiz ke mengemas kini leret secara dinamik apabila saiz tetingkap berubah fungsi ketinggian komponen.

3. Ringkasan

Artikel ini memperkenalkan cara menetapkan ketinggian untuk komponen swiper dalam uniapp. Jika anda mendapati ketinggian tidak boleh disesuaikan apabila menggunakan komponen leret, anda boleh cuba menggunakan reka letak fleksibel, fungsi onReady atau fungsi jam tangan untuk menyelesaikan masalah. Menggunakan kaedah ini agak mudah dan hanya memerlukan pengetahuan asas tentang fungsi kitaran hayat Vue dan reka letak gaya. Saya harap kaedah yang diperkenalkan dalam artikel ini akan membantu anda dalam pembangunan uniapp.

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