Explication détaillée de l'implémentation d'un composant de module d'espace réservé d'image dans React

Cet article vous présente principalement des informations pertinentes sur la façon d'implémenter un composant d'image de module d'espace réservé assez élégant dans React. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur de référence pour l'étude ou le travail de chacun. J'espère que cela aide tout le monde.

Avant-propos

J'ai trouvé que le module d'espace réservé à l'image dans le projet n'était pas écrit avec élégance. Après avoir cherché, j'ai découvert que je ne trouvais pas le composant d'image que je voulais. J'en ai donc écrit un moi-même, ainsi qu'un composant image assez élégant : mult-transition-image-view

Capture d'écran :

Introduction à la fonction

Tout d'abord, c'est un composant relativement élégant : ce n'est pas un casse-tête à utiliser.

Le second peut réaliser les scénarios suivants :

• Quand il n'y a pas d'image, une image fictive s'affiche (vous pouvez directement utiliser css pour écrire le arrière-plan, ce qui est pratique personnalisé)

• J'espère que lors du chargement d'une grande image, une petite image pourra d'abord être occupée, puis passer à une grande image. Similaire à la capture d'écran ci-dessus.

Utilisation

Installer le package npm

npm install react-mult-transition-image-view

Partie code

 import ImageBoxView from 'react-mult-transition-image-view'

 <ImageBoxView img="#你的图片#"/>

Bien sûr, vous pouvez définir Autres attributs

 <ImageBoxView
 width="320" // 
 height="200" // 宽高，会转化成 style 属性
 mode="style" // 使用 style 去显示图片（默认:img）
 img="#你要的图片#"/> // 图片路径

L'effet de transition des petites images aux grandes images

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 mode="style" // 使用 style 去显示图片（默认:img）
 img={[&#39;#小图地址#&#39;, &#39;#大图地址#&#39;]}/> // img 传入数组形式。

Obtenir un affichage aléatoire des images

Lorsqu'il y a beaucoup d'images, les images peuvent être affiché à des moments aléatoires Affichage, augmente l'expérience d'affichage des images
(c'est vraiment moche ensemble)

 <ImageBoxView
 delay="100" // 延迟加载（默认：0），可以传入一个随机数
 img="#你要的图片#"/> // 图片路径

Effet diaporama

Parce que l'attribut img peut être transmis dans un tableau, il peut théoriquement être chargé de nombreuses images pour obtenir un effet diaporama.
Utilisez l'attribut wait pour définir le temps d'attente après le chargement de chaque image

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 wait="100" // 每张图片加载完后，继续加载下一张的时间（默认：0）
 mode="style" // 使用 style 去显示图片（默认:img）
 img={[&#39;#图片1#&#39;, &#39;#图片2#&#39;, &#39;#图片3#&#39;]}/> // img 传入数组形式。

Partie style

N'oubliez pas la partie style

.c-img-box{
 display:inline-block;
 width: 320px;
 height: 200px;
 background: #f7f6f5;
 position: relative;
 .img-hold{
 overflow: hidden;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 img{
  width:100%;
  height:100%;
 }
 &.img-animate{
  transition: opacity 0.5s;
 }
 }
 
 .img-cover{
 background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px;
 background-color:#f0f0f0;
 }
 
 .img-cover,
 .img-hold,
 .img-hide{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 }
 
 .img-hide{
 opacity: 0;
 }
 
}

Recommandations associées :

Explication détaillée de la création d'un environnement de développement avec React Native

React encapsule l'exemple de code d'un composant réutilisable du portail

Une brève discussion sur le style direct de l'isomorphisme de réaction

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!