微信小程序 tab+swiper+scroll-view 不同型号设备高度自适应问题

问题

 在简单学习了前端知识后开始了我的第一个微信小程序，基本上都还蛮顺利，但是遇到了一个难题
 想要实现下面这样一个界面，头部的tab固定不动，使用swiper+scroll-view实现swiper-item的滚动和滑动翻页，使用的是swiper组件，但是之前查到的消息是微信小程序swiper的高度无法像网页一样屏幕自适应，所以参照了网上的一些方法如在js中动态计算可使用高度，但是不知道为什么，在不同机型上高度总是不对，后来自己计算了一下

winHeight: (res.windowHeight -10-40)*750/res.screenWidth

是差不多最正确的值，但是还是会有一些差距。
本来打算放弃使用了，结果这时候意外发现了一篇文章:
小程序如何写一个优美的tab选项卡
里面使用的方法十分简单的解决了我的问题
只要修改swiper-box即可

  .swiper-box{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  box-sizing: border-box;
  padding: 84rpx 0rpx 0rpx 0rpx;
  z-index: -1;
}

wxml

<!-- 顶部导航 -->
<view>
  <view class="swiper-tab">
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">母婴用品</view>
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">产前健康</view>
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">产后健康</view>
    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">幼儿服务</view>


  </view>
   <swiper current="{{currentTab}}" class="swiper-box" duration="300" bindchange="bindChange">

    <!-- 母婴用品 -->
    <swiper-item>
      <text></text>
    </swiper-item>


    <!-- 产前健康 -->
    <swiper-item>
      <scroll-view scroll-y style="height:100%;">
      </scroll-view>
    </swiper-item>



    <!-- 产后健康 -->
    <swiper-item>
      <scroll-view scroll-y style="height:100%;">
      </scroll-view>
    </swiper-item>


    <!-- 幼儿服务 -->
    <swiper-item>
    </swiper-item>
    
  </swiper>
</view>

js

 //滑动切换tab
  bindChange: function(e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  // 点击tab切换 
  swichNav: function(e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }

wxss

.swiper-tab {
  width: 100%;
  text-align: center;
  line-height: 80rpx;
  box-shadow:  1px 1px 1px #efefef;
}

.swiper-tab-list {
  font-size: 30rpx;
  display: inline-block;
  width: 25%;
  color: #777;
}
.swiper-box{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  box-sizing: border-box;
  padding: 84rpx 0rpx 0rpx 0rpx;
  z-index: -1;
}

.on {
  color: #ff9696;
  border-bottom: 5rpx solid #ff9696;
}