微信 scroll-view 里面的內容被遮擋的問題

不知道大家在寫微信的時候 使用scroll-view 里面嵌套一些 列表 然后再下拉到底的時候 有沒有遇到過 內容不能完全展現的問題 大致下面這樣

已經到底了 但是就是顯示不全 

這個時候 有些人以為 是scroll-view 高度不夠 然后拼命加高度就好了（我就是這種人） ，其實不是，

而且恰恰相反。是因為你給的scroll-view高度太高了導致的，假如把他設置的很低 就會發現 能夠全部展示

但是也不能太低，如何設置scroll-view 高度恰恰正好呢

比如我這個界面  結構是這樣的 

<view class='topHead'>
  <view class='gameBox' bindtap='_gotoAllGame'>
    <view class='allGameBox'>
      <span class="allGameText">{{currentGameName}}</span>
      <image class='allGameIcon' src="../../images/match/dropdown.png"></image>
    </view>
    <view class='searchIconBox' bindtap='_gotoSearch'>
      <image class='searchIcon' src="../../images/match/search_black.png"></image>
      <input placeholder='搜索' placeholder-class='textPlaceholder'></input>
    </view>
  </view>
  <view class='matchType'>
    <view class='{{matchType=="all"? "matchTypeAll current" : "matchTypeAll"}}' bindtap='_changeMatchType' data-type='all'>比賽列表</view>
    <view class='{{matchType=="mine"? "matchTypeMine current" : "matchTypeMine"}}' bindtap='_changeMatchType' data-type='mine'>我的比賽 </view>
  </view>
</view>


<block wx:if="{{matchList.length > 0}}">
  <scroll-view scroll-y bindscrolltolower="_scrolltoUpdate" lower-threshold="{{20}}" class='scrollview' style="height:2000px;">
      <match-list match-list='{{  matchType=="all"? matchList : matchMineList}}'></match-list>
  </scroll-view>
</block>

界面就是由 .topHead 與  scroll-view 組成的 ，所以這個時候只要獲取 整個界面高度 和 .topHead  的高度 再減去頂部導航的64px就可以了 不說了 看代碼

    let query = wx.createSelectorQuery();
    query.select('.topHead').boundingClientRect();
    query.exec((res) => {
       let listHeight = res[0].height; // 獲取list高度
        wx.getSystemInfo({
          success: function (height) {
            that.setData({
              scrollHeight: parseInt(height.windowHeight) - 64 - listHeight 
            });
          }
        });
    })

scrollHeight設置給 scroll-view 試試看

試試看 說不定可以幫到你~