實現(xiàn)這兩個頁面
要求：
當(dāng)?shù)谝豁搩?nèi)容塊高度大于屏幕高度時饼拍，顏色扉頁的高度=內(nèi)容塊高度。反之，
顏色扉頁的高度=屏幕高度
背景：圖片區(qū)塊封裝了一個加載動畫組件（所以在圖片沒有加載完的時候，圖片區(qū)域的高度是不準(zhǔn)確的）
知識點：動態(tài)獲取內(nèi)容塊高度可以使用boundingClientRect這個方法飘言。
經(jīng)歷的問題：
這個方法在此處得到的高度并不準(zhǔn)確。經(jīng)過對比發(fā)現(xiàn)驼侠，差別的地方是在圖片位置姿鸿。代碼獲取的高度會比實際視覺高度高出一些。
2020.3.27分割線
發(fā)現(xiàn)問題原因：image設(shè)置display: inline-block;倒源，導(dǎo)致image標(biāo)簽外包標(biāo)簽<image-wrapper>比實際image高了幾個px（這是由于圖片標(biāo)簽?zāi)J(rèn)了display: inline）
所以解決方法就又可以是：
把image設(shè)置display: block;苛预。考慮到圖片沒有加載完畢的問題笋熬，所以在小程序onshow鉤子中調(diào)用就可以解決問題了碟渺。
總結(jié)：
display: block的特點
① 可以設(shè)置width，height突诬，margin苫拍，padding各個方向。（沒有內(nèi)容時）不設(shè)置width默認(rèn)為瀏覽器寬度旺隙，height默認(rèn)為0绒极。（有內(nèi)容時）根據(jù)內(nèi)容物規(guī)定
② 即使設(shè)置了寬度，還是會獨占一行
總結(jié)：
display: inline的特點
① 不會獨占一行蔬捷。寬度根據(jù)內(nèi)容決定垄提。
② 不能設(shè)置width，height周拐。水平方向的padding铡俐、margin有用，但是垂直方向只在特定條件下padding有用妥粟。
③ 行內(nèi)元素都有一點間距
④ 對行內(nèi)元素設(shè)置float审丘，該元素會被賦值block，并且擁有浮動特性勾给。行內(nèi)元素之間的空白也消失了
⑤ 使用position定位的時候滩报，absolute與fixed.都會使得原先的行內(nèi)元素變?yōu)閴K級元素
⑥ 當(dāng)行內(nèi)元素有內(nèi)容，并且設(shè)置了padding水平方向播急，那么設(shè)置padding垂直方向就是有用的
總結(jié)：
display: inline-block的特點
① 不會獨占一行
② 可以設(shè)置width脓钾，height
③ 當(dāng)inline-block碰到同類（inline，inline-block)時桩警，誰的上下margin可训、padding或line-height大，就聽誰的。除非它是inline握截，因為inline的margin是不起作用的飞崖。且inline的padding是不占空間的。
④ inline和inline-block會引起間距的空格
空隙解決辦法：
① 兩個元素代碼放在同一行
② 兩個節(jié)點之間加注釋節(jié)點
③ 設(shè)置父元素font-size: 0
<div class="item1">item1</div><div class="item2">item2</div>
特別的：當(dāng)block元素包住inline-block/inline的圖片標(biāo)簽的時候川蒙，block元素會被撐開多3-4px左右
當(dāng)時并沒有發(fā)現(xiàn)是inline-block的問題蚜厉。所以就使用了下面的第二種方法长已。
2020.3.03分割線
在圖片加載好的鉤子內(nèi)畜眨，對組件中<image>標(biāo)簽調(diào)用boundingClientRect方法，然后triggle到父頁面术瓮。
這里有一個注意點：
boundingClientRect這個方法在組件中使用康聂，需要添加in(this)。this指該組件
let query = wx.createSelectorQuery().in(this)
query.select('.img1').boundingClientRect(function (rect) { ...}).exec()
我們可以通過這樣調(diào)用子組件方法胞四，從而得到組件高度恬汁。
this.lazyimg = this.selectComponent('.lazyimg')
var height = this.lazyimg.getHeight()
當(dāng)在圖片列表頁面是不需要計算高度的，只有在詳細(xì)圖片頁面才需要辜伟。所以在子組件中設(shè)置prop氓侧。判斷組件所在頁面。在特定頁面才會觸發(fā)高度計算导狡。
至此约巷，解決問題。
