小程序scroll-view高度自适应各种手机的效果实现

wxml:

<view style="height: 100vh; display: flex; flex-direction: column; justify-content: space-between;">
<view>
  <view wx:if="{{checked.length>0}}">
    <scroll-view scroll-x="true" style="width: 100%;white-space: nowrap;padding: 32rpx">
      <view wx:for="{{checked}}" wx:key="id" class="tab" bindtap="deleteTab" data-id="{{item.id}}">
        <view class="tabname">{{item.name}}</view>
        <view class="deleticon">
          <image src="/images/hdpi/delete.png" style="width: 24rpx;height: 24rpx; display: flex;"></image>
        </view>
      </view>
    </scroll-view>
  </view>
  <view wx:else class="tab-group-text">
    请添加你感兴趣的工作地，最多可选15个
  </view>
</view>

<view class="box" style="height: {{screenHeight}}px;">
  <scroll-view enhanced="true" show-scrollbar="false" class='nav_left' scroll-y='true' style="height: 100%;">
    <block wx:for="{{list}}" wx:key="{{index}}">
      <view class="nav_left_items {{curIndex==index?'active':''}}" bindtap="switchRightTab" data-index='{{index}}' data-id="{{item.id}}">{{item.name}}</view>
    </block>
  </scroll-view>
  <scroll-view enhanced="true" show-scrollbar="false" class="nav_right" scroll-y="true" style="height: 100%;">
    <!--如果有数据，才遍历项-->
    <view wx:if="{{list[curIndex].areaBaseList.length>0}}">
      <block wx:for="{{list[curIndex].areaBaseList}}" wx:key="{{index}}">
        <view class="nav_right_items {{curIndex2==index?'active':''}}" bindtap="handletwo" data-name="{{item.name}}" data-indextwo='{{index}}' data-idtwo="{{item.id}}">
          <!--跳转下一级 -->
          <text>{{item.name}}</text>
        </view>
      </block>
    </view>
  </scroll-view>
  <scroll-view enhanced="true" show-scrollbar="false" class="nav_right_two" scroll-y="true" style="height: 100%;" wx:if="{{list[curIndex].areaBaseList[curIndex2].areaBaseList.length>0}}">
    <block wx:for="{{list[curIndex].areaBaseList[curIndex2].areaBaseList}}" wx:key="{{index}}">
      <view bindtap="handlethree" data-idthree="{{item.id}}" data-indexthree="{{index}}" data-name="{{item.name}}" class="nav_right_items {{curIndex3==index?'active':''}}"><text>{{item.name}}</text></view>
    </block>
  </scroll-view>
</view>

<view>
  <btn bind:save="submit" bind:clean="clean"></btn>
</view>

</view>

js:

      let screenHeight = wx.getSystemInfoSync().windowHeight
      this.setData({
        screenHeight: screenHeight - 200
      })

css:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}


.box {
  display: flex;
  width: 100%;
  flex: 1;
}

.nav_left {
  width: 25%;
  background: #F2F2F2;
  text-align: center;
}

.nav_left .nav_left_items {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
}

.nav_left .nav_left_items.active::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: 28rpx;
  top: 40rpx;
  width: 8rpx;
  height: 20rpx;
  border-radius: 4rpx;
  background-color: #05C160;
}

.nav_right {
  border: 2rpx solid #F7F7F7;
  width: 35%;

  background-color: #FFFFFF;

}

.nav_right .nav_right_items {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
  text-align: center;

}

.nav_right .nav_right_items image {
  width: 120rpx;
  height: 120rpx;
}

.nav_right .nav_right_items text {
  display: block;
  font-size: 28rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/*隐藏滚动条*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.nav_right_two {
  border: 2rpx solid #F7F7F7;
  background-color: #FFFFFF;
  width: 40%;
}

.nav_right_two .nav_right_items {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 28rpx;
  text-align: center;
}

.nav_right_two .nav_right_items text {
  display: block;
  font-size: 28rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.active {
  background: #FFF;
  color: #05C160;
  font-size: 28rpx;
}



.tab-group {
  display: flex;
  margin: 32rpx 32rpx 0rpx 32rpx;
  border-bottom: 2rpx solid #F7F7F7;
  padding-bottom: 32rpx;
  height: 79rpx;
}

.tab-group-text {
  padding: 48rpx 32rpx;
  font-size: 24rpx;
  color: #787878;
}

.tab {
  position: relative;
  display: inline-block;
  align-items: center;
  font-size: 24rpx;
  margin-left: 16rpx;

  text-align: center;
  width: 176rpx;
  background-color: #EEFDEA;
  border-radius: 8rpx;
  border: 2rpx solid #05C160;
  color: #05C160;
}

.deleticon {
  position: absolute;
  top: 0;
  right: 0;
}

.tabname {
  flex: 2;
  padding: 16rpx 0rpx;
}