眾所周知，可以滑動的scroll元件在移動端非常的重要，幾乎每個頁面都要用到。
而小程式的scroll-view元件就比較坑了，非得指定乙個高度才能正常使用。布局複雜的時候誰還給你算高度啊。。。
坑歸坑，沒辦法，還是得用……既然官方要求必須傳高度，那就想辦法計算吧。
先給個示例圖：
這是乙個稍微複雜點的頁面，最上面是兩個tab標籤，每個標籤的頁面是乙個子元件。第二個子元件布局是上面乙個標題，下面是scroll-view。
再畫個解剖圖吧……
頁面分三部分，tab，title，scroll-view。不要忘了每個部分間還有margin, 這裡設定的是每個margin都是10px。
所以要計算scroll-view的高度可以得出下面公式：
scroll-view 的高度 = 頁面可用高度 - tab高度 - title高度 - 10 - 10
複製**
為什麼減兩個10呢？上面說了10是margin的距離，tab與title有10px的margin，title與scroll-view也有10px的margin。
需要注意的是計算用的單位都是px，不是小程式的rpx。因為下面呼叫介面獲取可用螢幕高度時得到的就是px。
上面的公式中的變數有：頁面可用高度,title的高度，tab的高度。
這裡需要計算的就是 頁面可用高度 和title的高度，因為為了簡單tab的高度是寫死的50px, 當然不寫死也沒關係，在父元件中計算tab的高度傳給子元件就好。
下面正式開始計算
//計算 scroll-view 的高度
computescrollviewheight() )
}).exec()
},複製**
這裡主要是通過小程式封裝的 api 來計算的。
wx.getsysteminfosync()可以得到裝置的各種資訊，關於高度的引數有兩個，乙個是螢幕高度screenheight，乙個是可使用視窗高度windowheight。注意計算的時候要用windowheight，這樣算出來的高度才是對的。screenheight是手機的螢幕高度，包含了手機的狀態列和小程式標題欄。
有了可用螢幕高度，還需要元素的高度。計算元素高度小程式也提供了 api，參見wxml節點資訊api。
具體用法看文件就好了，精簡的使用步驟就是：
let query = wx.createselectorquery().in(this)
query.select('.title').boundingclientrect(function(res) ).exec()
複製**
注意在元件component裡使用的話，要用wx.createselectorquery().in(this)，將選擇器的選取範圍更改為自定義元件component內。（初始時，選擇器僅選取頁面範圍的節點，不會選取任何自定義元件中的節點。）
如果想同時測量多個節點的高度呢？
能計算單個當然也能同時計算多個。如下：
computescrollviewheight() )
})},複製**
有幾個節點就寫幾個query.select('.search').boundingclientrect()， 然後呼叫query.exec()執行操作獲取節點資訊的陣列。
注意：呼叫封裝好的computescrollviewheight()的時機是在生命週期函式的ready()中，不能在created()，否則取不到資料。
參見component構造器
計算完成後如何使用呢？
複製**通過上面的方法使用。
注意：一定要在變數後面加上單位px，不加的話會出錯。
以上就是精確計算微信小程式scrollview高度的方法，從此再也不擔心scroll-view高度錯亂了！
（微信小程式）一 初識微信小程式
需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...
微信小程式
2.單獨設定某一頁面下的頂部欄的背景顏色,在其對應的.json檔案下修改即可 3.this.setdata 注意 onload函式下面執行的是非同步操作，非同步操作裡面this.data.直接賦值，是無效的，必須使用this.setdata this.setdata msg he llo wor l...
微信小程式
你好！這是你第一次使用markdown編輯器所展示的歡迎頁。如果你想學習如何使用markdown編輯器,可以仔細閱讀這篇文章，了解一下markdown的基本語法知識。全新的介面設計，將會帶來全新的寫作體驗 在創作中心設定你喜愛的 高亮樣式，markdown將 片顯示選擇的高亮樣式進行展示 全新的ka...