ホームページ > 記事 > ウェブフロントエンド > Reactでの画像プレースホルダーモジュールコンポーネントの実装の詳細な説明

Reactでの画像プレースホルダーモジュールコンポーネントの実装の詳細な説明

小云云オリジナル: 2018-01-04 09:15:392021ブラウズ

この記事では、React で非常にエレガントなプレースホルダーモジュールの画像コンポーネントを実装する方法に関する関連情報を主にサンプルコードを通じて詳しく紹介します。この記事は、皆さんの学習や仕事に一定の参考になります。皆さんのお役に立てれば幸いです。

前書き

プロジェクト内の画像プレースホルダーモジュールがエレガントに記述されていないことがわかりました。探してみたところ、必要な画像コンポーネントが見つからないことがわかりました。そこで私も自分で書いて、かなりエレガントな画像コンポーネントを書きました: mult-transition-image-view

スクリーンショット:

機能紹介

まず第一に、これは比較的エレガントなコンポーネントです:使いにくい頭痛。

2 番目のシナリオでは、次のシナリオを実現できます:

画像がない場合、プレースホルダー画像が表示されます (簡単にカスタマイズできるように背景を CSS で直接記述することができます)
大きな画像の場合、最初に小さな画像を占有し、その後大きな画像に移行することができます。上のスクリーンショットと同様です。

使い方

npmパッケージをインストール

npm install react-mult-transition-image-view

コード部分

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

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

もちろん他のプロパティも設定可能

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

小さな画像から大きな画像への遷移効果

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

画像のランダム表示を実現

写真がたくさんある場合、画像を表示するエクスペリエンスを高めるために、ランダムな時間に画像を表示することができます
(一緒に表示されると本当に少し見苦しいです)

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

スライドショー効果

img 属性により、配列に渡すと、理論的には、多くの画像をロードしてスライドショー効果を実現できます。
wait 属性を使用して、各画像が読み込まれた後の待ち時間を設定します

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

スタイル部分

スタイル部分を忘れないでください

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

Reactでの画像プレースホルダーモジュールコンポーネントの実装の詳細な説明

関連記事