快捷導(dǎo)航

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

更新時(shí)間：2017年10月30日 09:31:55 作者：胡蘿卜有點(diǎn)坑

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

前言

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

截圖：

功能簡(jiǎn)介

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

第二個(gè)它能實(shí)現(xiàn)以下場(chǎng)景：

沒(méi)有圖片的時(shí)候，顯示一個(gè)占位圖（可以直接用css來(lái)寫(xiě)背景，方便自定義）
希望在加載大圖的時(shí)候，能先占位一張小圖，然后再過(guò)渡到一張大圖。類(lèi)似上面的截圖。

使用方法

安裝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" // 寬高，會(huì)轉(zhuǎn)化成 style 屬性
 mode="style" // 使用 style 去顯示圖片（默認(rèn):img）
 img="#你要的圖片#"/> // 圖片路徑

小圖過(guò)渡到大圖的效果

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

實(shí)現(xiàn)隨機(jī)顯示圖片

當(dāng)有很多圖片的時(shí)候，可以讓圖片隨機(jī)時(shí)間顯示，增加圖片顯示出來(lái)的體驗(yàn)
（一起出來(lái)真的有點(diǎn)丑）

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

幻燈片效果

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

 <ImageBoxView
 animate="fade" // 會(huì)觸發(fā)動(dòng)畫(huà)樣式(見(jiàn)下方樣式部分 )
 wait="100" // 每張圖片加載完后，繼續(xù)加載下一張的時(shí)間（默認(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é)

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

您可能感興趣的文章: