微信小程序：swiper高度動態適配

ps：沒有在swiper中添加scroll-view是爲了可使用頁面的下拉刷新，最終方法直接跳到方案四。（含代碼片斷）

初始方案

swiper高度固定，swiper-item默認絕對定位且寬高100%，每一個swiper-item中內容由固定高度的child組成，而後根據child數量動態計算swiper高度，初始方案（因爲rpx針對屏幕寬度進行自適應，child_height使用rpx方便child正方形狀況下自適應）：

swiper_height = child_height * child_num

屏幕效果僅在寬度375的設備（ip六、ipⅩ）完美契合，其餘設備都底部會出現多餘空隙，而且在上拉加載過程當中，隨着內容增長，底部空隙也逐漸變大。

方案二

開始覺得是rpx適配顯示問題，後經過文檔中描述的WXSS 尺寸單位轉化rpx爲px（child_height使用rpx）：

swiper_height = child_height * child_num * ( window_width / 750 )

而後並沒有變化，咱們能夠看到child_height在不一樣寬度屏幕下，顯示的寬高尺寸是不同的（px單位），那就嘗試使用box在各個屏幕的實際高度進行計算swiper高度，box的高度能夠單獨在頁面中增長一個固定標籤，該標籤樣式和box寬高保持一致而且隱藏起來，而後在page的onload中經過wx.createSelectorQuery()獲取標籤實際高度baseItemHeight（px單位）：

swiper_height = baseItemHeight * child_num

結果顯示本來的ip六、ipⅩ沒有問題，另外寬帶小於375的ip5上也ok，可是在大於375的設備上仍是出現空隙，好比ip的plus系列。

方案三

以前的方案都沒法計算出合適的swiper高度，那就換個思路，好比去計算空隙的高度。

swiper底部有一個load標籤顯示「加載更多」，該標籤緊貼box其後，經過wx.createSelectorQuery()來獲取bottom，然而你會發現bottom是標籤的height加top的和。計算底部空隙（暫時忽略「加載更多」標籤高度）：

space_height = swiper_height - load_top

剛計算完能夠看到在靜止狀態下，計算出space_height拿去修改swiper_height顯示空隙恰好被清掉了，可是接着就發如今動過程當中獲取到的bottom是不固定的，也就是說數值可能不許確致使space_height計算錯誤，顯示效果達不到要求。

方案四

基於上述方案，swiper底部的load標籤絕對定位bottom:0，同時在swiper底部添加一個高度爲0而且尾隨內容box其後的標籤（mark），而後獲取這兩個標籤的top值之差：

space_height = load_top - mark_top

代碼片斷 wechatide://minicode/adphcCm765Z8

此次獲取到的空隙高度用於再計算swiper高度完美契合，美滋滋！！！