uniapp melaksanakan pencampuran video dan gambar

1. Latar Belakang

Dengan pembangunan Internet mudah alih yang berterusan, sumber multimedia yang kaya seperti video dan gambar telah menjadi bahagian yang amat diperlukan dalam kehidupan seharian manusia. Walau bagaimanapun, dalam beberapa senario aplikasi, keperluan untuk memaparkan gambar dan video pada masa yang sama menjadi semakin biasa. Dalam konteks ini, bagaimana untuk mencapai kesan campuran video dan gambar yang cantik dan lancar pada terminal mudah alih telah menjadi masalah yang tidak dapat dielakkan.

2. Pemilihan Teknologi

Artikel ini menggunakan uniapp rangka kerja pembangunan merentas platform sebagai penyelesaian pelaksanaan. uniapp menggunakan vuejs sebagai bahasa templatnya dan mempunyai pengalaman pembangunan yang baik serta sokongan komuniti. Dalam uniapp, anda boleh menggunakan perpustakaan komponen seperti uni-ui atau mescroll untuk membina halaman dengan pantas, yang pantas dan cekap.

3. Rancangan Pembangunan

Artikel ini membahagikan susunan bercampur video dan gambar kepada dua susun atur: "susunan berselang seli" dan "susunan bersebelahan". Antaranya, "susunan berselang-seli" bermaksud video dan gambar dipaparkan secara berselang-seli dalam urutan, manakala "susunan bersebelahan" bermaksud berbilang video atau gambar dipaparkan bersebelahan dalam baris yang sama.

Dalam "susunan berselang-seli", anda boleh menggunakan susun atur fleksibel. Contoh kod adalah seperti berikut:

<template>
  <view class="alt">
    <view v-for="(item, index) in list" :key="index" class="item">
      <video v-if="item.type==='video'" :src="item.src"></video>
      <image v-else :src="item.src"></image>
    </view>
  </view>
</template>

<style lang="scss">
  .alt {
    display: flex;
    flex-wrap: wrap;
    .item {
      box-sizing: border-box;
      width: 50%;
      padding: 10px;
      video {
        display: block;
        width: 100%;
      }
      image {
        display: block;
        width: 100%;
      }
    }
    .item:nth-child(odd) {
      margin-right: 10px;
    }
    .item:nth-child(even) {
      margin-left: 10px;
    }
  }
</style>

Perlu diingat bahawa dalam contoh ini, lebar video dan imej ditetapkan kepada 50%. lebar elemen kanak-kanak dan tetapan lain Ini memastikan bahawa lebar elemen kanak-kanak adalah konsisten dan disusun dengan kemas. Tetapan unsur ganjil dan genap boleh dicapai melalui pemilih anak ke-n.

Dalam "susunan bersebelahan", anda perlu menggunakan reka letak grid. Contoh kod adalah seperti berikut:

<template>
  <view class="line">
    <view v-for="(item, index) in list" :key="index" class="item">
      <video v-if="item.type==='video'" :src="item.src"></video>
      <image v-else :src="item.src"></image>
    </view>
  </view>
</template>

<style lang="scss">
  .line {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
    .item {
      box-sizing: border-box;
      overflow: hidden;
      video {
        display: block;
        width: 100%;
      }
      image {
        display: block;
        width: 100%;
      }
    }
  }
</style>

Perlu diambil perhatian bahawa dalam contoh ini, lajur templat grid ditetapkan untuk mengulangi(isi-auto, minmax(200px, 1fr)), iaitu untuk membuat ikut susun atur Menyesuaikan diri dengan perubahan dalam lebar skrin. Antaranya, "auto-isi" bermaksud mengisi elemen secara automatik mengikut lebar bekas, dan "minmax(200px, 1fr)" bermaksud lebar elemen ialah sekurang-kurangnya 200px dan nilai maksimum ialah 1fr (iaitu , menduduki purata ruang yang tinggal di Hertz).

4. Ringkasan

Melalui contoh kod di atas, kita dapat melihat bahawa sangat mudah untuk menggunakan uniapp untuk mencapai pencampuran video dan gambar. Perkara utama ialah menguasai kemahiran susun atur Dengan penggunaan kaedah reka letak yang betul seperti flex dan grid, anda boleh mencapai pelbagai kesan dengan mudah.

Atas ialah kandungan terperinci uniapp melaksanakan pencampuran video dan gambar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!