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

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