眾所周知僧叉，可以滑動(dòng)的 scroll 組件在移動(dòng)端非常的重要奕枝，幾乎每個(gè)頁面都要用到。
而小程序的 scroll-view 組件就比較坑了瓶堕，非得指定一個(gè)高度才能正常使用倍权。布局復(fù)雜的時(shí)候誰還給你算高度啊。。薄声。
坑歸坑，沒辦法题画，還是得用……既然官方要求必須傳高度默辨，那就想辦法計(jì)算吧。
一苍息、布局分析缩幸，推導(dǎo)公式
先給個(gè)示例圖：
這是一個(gè)稍微復(fù)雜點(diǎn)的頁面，最上面是兩個(gè) tab 標(biāo)簽竞思，每個(gè)標(biāo)簽的頁面是一個(gè)子組件表谊。第二個(gè)子組件布局是上面一個(gè)標(biāo)題，下面是 scroll-view 盖喷。
再畫個(gè)解剖圖吧……
頁面分三部分爆办，tab，title课梳，scroll-view距辆。不要忘了每個(gè)部分間還有 margin, 這里設(shè)置的是每個(gè) margin 都是 10px。
所以要計(jì)算 scroll-view 的高度可以得出下面 公式：
scroll-view 的高度 = 頁面可用高度 - tab高度 - title高度 - 10 - 10
為什么減兩個(gè) 10 呢暮刃？上面說了 10 是 margin 的距離跨算，tab 與 title 有 10px 的margin，title 與 scroll-view 也有 10px 的 margin椭懊。
需要注意的是計(jì)算用的單位都是 px诸蚕，不是小程序的 rpx。因?yàn)橄旅嬲{(diào)用接口獲取可用屏幕高度時(shí)得到的就是 px 氧猬。
二背犯、計(jì)算變量的高度
2.1 計(jì)算單個(gè)節(jié)點(diǎn)高度
上面的公式中的變量有：頁面可用高度, title 的高度，tab 的高度狂窑。
這里需要計(jì)算的就是 頁面可用高度 和 title 的高度媳板，因?yàn)闉榱撕唵?tab 的高度是寫死的 50px, 當(dāng)然不寫死也沒關(guān)系，在父組件中計(jì)算 tab 的高度傳給子組件就好泉哈。
下面正式開始計(jì)算
//計(jì)算 scroll-view 的高度
computeScrollViewHeight() {
let that = this
let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
//得到標(biāo)題的高度
let titleHeight = res.height
//scroll-view的高度 = 屏幕高度- tab高(50) - 10 - 10 - titleHeight
//獲取屏幕可用高度
let screenHeight = wx.getSystemInfoSync().windowHeight
//計(jì)算 scroll-view 的高度
let scrollHeight = screenHeight - titleHeight - 70
that.setData({
scrollHeight: scrollHeight
})
}).exec()
},
這里主要是通過小程序封裝的 API 來計(jì)算的蛉幸。
wx.getSystemInfoSync() 可以得到設(shè)備的各種信息，關(guān)于高度的參數(shù)有兩個(gè)丛晦，一個(gè)是屏幕高度 screenHeight奕纫，一個(gè)是可使用窗口高度 windowHeight。注意計(jì)算的時(shí)候要用 windowHeight烫沙，這樣算出來的高度才是對(duì)的匹层。screenHeight是手機(jī)的屏幕高度，包含了手機(jī)的狀態(tài)欄和小程序標(biāo)題欄。
有了可用屏幕高度升筏，還需要元素的高度撑柔。計(jì)算元素高度小程序也提供了 API，參見 WXML節(jié)點(diǎn)信息API您访。
具體用法看文檔就好了铅忿，精簡的使用步驟就是：
let query = wx.createSelectorQuery().in(this)
query.select('.title').boundingClientRect(function(res) {
//在這里做計(jì)算，res里有需要的數(shù)據(jù)
}).exec()
注意在組件 component 里使用的話灵汪，要用 wx.createSelectorQuery().in(this) 檀训，將選擇器的選取范圍更改為自定義組件component內(nèi)。（初始時(shí)享言，選擇器僅選取頁面范圍的節(jié)點(diǎn)峻凫，不會(huì)選取任何自定義組件中的節(jié)點(diǎn)。）
如果想同時(shí)測量多個(gè)節(jié)點(diǎn)的高度呢览露？
2.2 計(jì)算多個(gè)節(jié)點(diǎn)高度
能計(jì)算單個(gè)當(dāng)然也能同時(shí)計(jì)算多個(gè)荧琼。如下：
computeScrollViewHeight() {
let that = this
let query = wx.createSelectorQuery().in(this)
query.select('.search').boundingClientRect()
query.select('.title-wrapper').boundingClientRect()
query.exec(res => {
let searchHeight = res[0].height
let titleHeight = res[1].height
let windowHeight = wx.getSystemInfoSync().windowHeight
let scrollHeight = windowHeight - searchHeight - titleHeight - 30 - 5 - 50
this.setData({ scrollHeight: scrollHeight})
})
},
有幾個(gè)節(jié)點(diǎn)就寫幾個(gè) query.select('.search').boundingClientRect()， 然后調(diào)用 query.exec() 執(zhí)行操作獲取節(jié)點(diǎn)信息的數(shù)組肛循。
注意： 調(diào)用封裝好的 computeScrollViewHeight() 的時(shí)機(jī)是在生命周期函數(shù)的 ready() 中铭腕，不能在 created()，否則取不到數(shù)據(jù)多糠。
三累舷、在 wxml 使用計(jì)算的結(jié)果
計(jì)算完成后如何使用呢？
<scroll-view scroll-y style='height: {{scrollHeight + "px"}}'></<scroll-view>
通過上面的方法使用。
注意：一定要在變量后面加上單位 px，不加的話會(huì)出錯(cuò)炸枣。
以上就是精確計(jì)算微信小程序scrollview高度的方法，從此再也不擔(dān)心 scroll-view 高度錯(cuò)亂了只怎！
作者正在寫一個(gè)有趣的開源項(xiàng)目 coderiver，致力于打造全平臺(tái)型全棧精品開源項(xiàng)目怜俐。
coderiver 中文名 河碼身堡，是一個(gè)為程序員和設(shè)計(jì)師提供項(xiàng)目協(xié)作的平臺(tái)。無論你是前端拍鲤、后端贴谎、移動(dòng)端開發(fā)人員，或是設(shè)計(jì)師季稳、產(chǎn)品經(jīng)理擅这，都可以在平臺(tái)上發(fā)布項(xiàng)目，與志同道合的小伙伴一起協(xié)作完成項(xiàng)目景鼠。
coderiver 河碼 類似程序員客棧仲翎，但主要目的是方便各細(xì)分領(lǐng)域人才之間技術(shù)交流，共同成長，多人協(xié)作完成項(xiàng)目溯香。暫不涉及金錢交易鲫构。
計(jì)劃做成包含 pc端（Vue、React）玫坛、移動(dòng)H5（Vue芬迄、React）、ReactNative混合開發(fā)昂秃、Android原生、微信小程序杜窄、java后端的全平臺(tái)型全棧項(xiàng)目肠骆，歡迎關(guān)注。
項(xiàng)目地址：https://github.com/cachecats/coderiver
您的鼓勵(lì)是我前行最大的動(dòng)力塞耕，歡迎點(diǎn)贊蚀腿，歡迎送小星星? ~
