微信 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 试试看

试试看 说不定可以帮到你~