快捷導(dǎo)航

react實現(xiàn)一個優(yōu)雅的圖片占位模塊組件詳解

更新時間：2017年10月30日 09:31:55 作者：胡蘿卜有點坑

這篇文章主要給大家介紹了關(guān)于react如何實現(xiàn)一個還算優(yōu)雅的占位模塊圖片組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

發(fā)現(xiàn)項目中的圖片占位模塊寫得很不優(yōu)雅，找了一圈，發(fā)現(xiàn)沒找到自己想要的圖片組件。于是自己寫了一個，寫了一個還算優(yōu)雅的圖片組件：mult-transition-image-view

截圖：

功能簡介

首先它是一個比較優(yōu)雅的組件：用起來不頭疼。

第二個它能實現(xiàn)以下場景：

沒有圖片的時候，顯示一個占位圖（可以直接用css來寫背景，方便自定義）
希望在加載大圖的時候，能先占位一張小圖，然后再過渡到一張大圖。類似上面的截圖。

使用方法

安裝npm 包

npm install react-mult-transition-image-view

代碼部分

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

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

當(dāng)然你可以設(shè)置其他屬性

 <ImageBoxView
 width="320" // 
 height="200" // 寬高，會轉(zhuǎn)化成 style 屬性
 mode="style" // 使用 style 去顯示圖片（默認(rèn):img）
 img="#你要的圖片#"/> // 圖片路徑

小圖過渡到大圖的效果

 <ImageBoxView
 animate="fade" // 會觸發(fā)動畫樣式(見下方樣式部分 )
 mode="style" // 使用 style 去顯示圖片（默認(rèn):img）
 img={['#小圖地址#', '#大圖地址#']}/> // img 傳入數(shù)組形式。

實現(xiàn)隨機顯示圖片

當(dāng)有很多圖片的時候，可以讓圖片隨機時間顯示，增加圖片顯示出來的體驗
（一起出來真的有點丑）

 <ImageBoxView
 delay="100" // 延遲加載（默認(rèn)：0），可以傳入一個隨機數(shù)
 img="#你要的圖片#"/> // 圖片路徑

幻燈片效果

因為 img 屬性可以傳入數(shù)組，所以理論上可以加載很多圖，實現(xiàn)幻燈片效果。
使用 wait 屬性來設(shè)置，每張圖片加載后的等待時間

 <ImageBoxView
 animate="fade" // 會觸發(fā)動畫樣式(見下方樣式部分 )
 wait="100" // 每張圖片加載完后，繼續(xù)加載下一張的時間（默認(rèn)：0）
 mode="style" // 使用 style 去顯示圖片（默認(rèn):img）
 img={['#圖片1#', '#圖片2#', '#圖片3#']}/> // img 傳入數(shù)組形式。

樣式部分

別忘了樣式部分

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

TODO

github: https://github.com/qilei0529/react-mult-transition-image-view

本地下載：http://xiazai.jb51.net/201710/yuanma/react-mult-transition-image-view(jb51.net).rar

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: