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={['#小图地址#', '#大图地址#']}/> // 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={['#图片1#', '#图片2#', '#图片3#']}/> // 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!