uniapp implémente le mixage de vidéos et d'images

1. Contexte

Avec le développement continu de l'Internet mobile, de riches ressources multimédias telles que des vidéos et des images sont devenues un élément indispensable de la vie quotidienne des gens. Cependant, dans certains scénarios d'application, la nécessité d'afficher des images et des vidéos en même temps devient de plus en plus courante. Dans ce contexte, comment obtenir un effet de mixage vidéo et image beau et fluide sur le terminal mobile est devenu un problème inévitable.

2. Sélection technologique

Cet article utilise le cadre de développement multiplateforme uniapp comme solution de mise en œuvre. uniapp utilise vuejs comme langage de modèle et possède une bonne expérience de développement et un soutien communautaire. Dans uniapp, vous pouvez utiliser des bibliothèques de composants telles que uni-ui ou mescroll pour créer rapidement des pages, ce qui est rapide et efficace.

3. Plan de développement

Cet article divise la disposition mixte de vidéos et d'images en deux dispositions : « disposition alternée » et « disposition côte à côte ». Parmi eux, « disposition alternée » signifie que les vidéos et les images sont affichées alternativement en séquence, tandis que « disposition côte à côte » signifie que plusieurs vidéos ou images sont affichées côte à côte dans la même rangée.

En "arrangement alterné", vous pouvez utiliser la disposition flexible pour y parvenir. L'exemple de code est le suivant :

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

Il est à noter que dans cet exemple, la largeur de la vidéo et de l'image est définie à 50 %. En effet, la mise en page flexible ajustera automatiquement la mise en page en fonction de la largeur de l'enfant. éléments et autres paramètres, qui peuvent garantir que les éléments enfants ont une largeur constante et sont soigneusement disposés. Le réglage des éléments pairs et impairs peut être réalisé via le sélecteur de nième enfant.

En "disposition côte à côte", vous devez utiliser la disposition en grille. L'exemple de code est le suivant :

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

Il est à noter que dans cet exemple, grid-template-columns est défini sur repeat(auto-fill, minmax(200px, 1fr)), ce qui consiste à faire changer la mise en page avec le largeur d'écran Et adaptatif. Parmi eux, "auto-fill" signifie remplir automatiquement l'élément en fonction de la largeur du conteneur, et "minmax(200px, 1fr)" signifie que la largeur de l'élément est d'au moins 200px et la valeur maximale est de 1fr (c'est-à-dire , occupant l'espace restant moyen en Hertz).

4. Résumé

Grâce aux exemples de code ci-dessus, nous pouvons voir qu'il est très facile d'utiliser uniapp pour réaliser un mixage de vidéos et d'images. La clé est de maîtriser les compétences de mise en page. Avec une utilisation appropriée des méthodes de mise en page telles que le flex et la grille, vous pouvez facilement obtenir divers effets.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!