之前做React Native 的時(shí)候問(wèn)就遇到過(guò)一個(gè)問(wèn)題
通過(guò) web 獲取的 image 不能和 瀏覽器一樣通過(guò)百分比設(shè)置 width 來(lái)自適應(yīng) height,
(瀏覽器 默認(rèn)是先渲染1個(gè) 1×1 px 的點(diǎn))
React Native 官方文檔解釋, 為了更好的用戶體驗(yàn)之類的,
不讓頁(yè)面文檔被加載的圖片完成時(shí)擠壓下去,
所以所有非本地 <Image/> 組件必須先指定寬高,
否則無(wú)法顯示出來(lái) 實(shí)際就是 0×0px.
(本地圖片可以不指定, 它默認(rèn)會(huì)根據(jù)自己的圖片實(shí)際寬高顯示)
用過(guò) IScroll 的都知道, 有一個(gè) refresh() 方法, 一般是當(dāng) DOM 改變(Ajax 之類的)的時(shí)候通過(guò)改方法重新計(jì)算 scrollHeight 的高度.
這也是為什么 IScroll 官方例子是在 body.onload 事件里 初始化 IScroll
但是 新 DOM 內(nèi)有圖片元素的話, 還需要再次監(jiān)聽(tīng) img.onload 事件
再次執(zhí)行 refresh() 方法
實(shí)際操作中就將使用 2次 refresh()
- ajax DOM 改變的時(shí)候需要
refresh() - image.onliad 再次
refresh()
那么這個(gè) refresh() 寫(xiě)多了真的不爽
所以現(xiàn)在在寫(xiě) webapp 的時(shí)候 推薦使用把 占位容器 高度寫(xiě)死, 這樣就可以避免監(jiān)聽(tīng)img.onload 事件
配合 vw vh 單位, 這樣也能做到自適應(yīng)高度
當(dāng)然對(duì)圖片數(shù)據(jù)的比例就要求統(tǒng)一了
當(dāng)然 也可以使用 background-clip或者 object-fit 屬性來(lái)使圖片相對(duì)居中顯示
[lang=jade]
.img-box
img(src="...")
[lang=stylus]
.img-box
width 50vw
height 50vw
overflow hidden
backgroun-image url('/*loading圖片*/')
img
width 100%
min-height 100%
object-fit cover
- 面對(duì) React Native 必須指定高度, 沒(méi)辦法我稚嫩好選擇妥協(xié)
- 使用 IScroll 上拉再加更多/下拉刷新 功能時(shí), 我覺(jué)得這樣做是有意義的
