小程序動態設置scroll-view的高度問題

眾所周知，小程序不能像jQuery一樣去操作dom元素來獲得元素的高度，給的wx.createSelectorQuery（）方法還是一個異步的方法，如果兩個套起來的話我做過測試，會一直循環，而我要做的頁面是這樣的

 

header區域和按鈕區域都是要動態獲取的，因為雖然設置了rpx的高度，但是！！！，當你取出來用屏幕高度去*2再減去這兩個區域的高度*2的時候，獲得的高度是不對的！不信的同學自己去試試，百分百頁面還有滾動條！

所以要換一種做法，我的頁面header是個自定義插件，所以header的高度在自定義組件中獲取到，然后發送到父元素，然后再使用wx.createSelectorQuery方法獲取到按鈕區域的高度，再用屏幕高度一減，獲得的高度就對了。代碼我給貼一下

header自定義組件的js

  ready(){
    const query = this.createSelectorQuery()
    query.select('.header').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec((res)=>{
      // console.log(res[0].height)
      let a = res[0].height
      this.triggerEvent('getHeader',a)
    })
  },

頁面的wxml

<header title="庫存查詢" blcShow="{{true}}" bindgetHeader="getHeaderHeight"></header>

<scroll-view scroll-y class="scroll" style="height:{{scrollHeight}}px" lower-threshold="{{30}}" bindscrolltolower="nextPage">

頁面的js

getHeaderHeight(e){
    let headerHeight = e.detail
    let a = wx.getSystemInfoSync()
    a = a.windowHeight
    const query = wx.createSelectorQuery()
    query.select('.filter-wrap').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(res=>{
      let b = a - headerHeight - (res[0].height)
      console.log(a,headerHeight,res[0].height,b)
      this.setData({scrollHeight:b})
    })
  },

設置的scrollHeight就是一個正確的高度