Detaillierte Erläuterung der Implementierung einer Bildplatzhaltermodulkomponente in React

Dieser Artikel führt Sie hauptsächlich in relevante Informationen zur Implementierung einer ziemlich eleganten Platzhaltermodul-Bildkomponente in React ein. Der Artikel führt sie ausführlich anhand von Beispielcode ein, der für das Studium oder die Arbeit eines jeden einen gewissen Referenzwert hat. Ich hoffe, es hilft allen.

Vorwort

Ich habe festgestellt, dass das Bildplatzhaltermodul im Projekt nicht elegant geschrieben war. Nachdem ich mich umgesehen hatte, stellte ich fest, dass ich die gewünschte Bildkomponente nicht finden konnte. Also habe ich selbst eines geschrieben und eine ziemlich elegante Bildkomponente geschrieben: mult-transition-image-view

Screenshot:

Funktionseinführung

Erstens ist es eine relativ elegante Komponente: Die Verwendung bereitet keine Kopfschmerzen.

Das zweite kann die folgenden Szenarien realisieren:

• Wenn kein Bild vorhanden ist, wird ein Platzhalterbild angezeigt (Sie können das direkt mit CSS schreiben Hintergrund, der bequem angepasst werden kann)

• Ich hoffe, dass beim Laden eines großen Bildes zuerst ein kleines Bild belegt werden kann und dann zu einem großen Bild übergegangen werden kann. Ähnlich wie im Screenshot oben.

Verwendung

Npm-Paket installieren

npm install react-mult-transition-image-view

Codeteil

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

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

Natürlich können Sie festlegen Andere Attribute

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

Der Effekt des Übergangs von kleinen Bildern zu großen Bildern

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

Zufällige Anzeige von Bildern erreichen

Wenn viele Bilder vorhanden sind, können die Bilder zu zufälligen Zeiten angezeigt werden Anzeige, erhöhen Sie das Erlebnis beim Anzeigen von Bildern
(zusammen ist es wirklich hässlich)

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

Diashow-Effekt

Da das img-Attribut an ein Array übergeben werden kann, Es können theoretisch viele Bilder geladen werden, um einen Diashow-Effekt zu erzielen.
Verwenden Sie das Warteattribut, um die Wartezeit nach dem Laden jedes Bildes festzulegen

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

Stilteil

Vergessen Sie nicht den Stilteil

.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;
 }
 
}

Verwandte Empfehlungen:

Detaillierte Erläuterung zum Aufbau einer Entwicklungsumgebung mit React Native

React kapselt den Beispielcode einer wiederverwendbaren Portalkomponente

Eine kurze Diskussion über den direkten Stil des Reaktionsisomorphismus

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Implementierung einer Bildplatzhaltermodulkomponente in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!