小程序tab选项卡样式

<view class='container'>

<!-- tab选项卡固定在头部 -->
  <view class='tabsHeader'>
      <image class="coursePic" 
      src="/images/banner1.jpg"></image>

      <view class='tabs'>
      <view class='tab1 tab_item'>
        <view>详细内容</view>
        <hr/>
      </view>
        <view class='tab2 tab_item'>
        <view>评论</view>
        <hr/>
      </view>
      <view class='tab3 tab_item'>
        <view>课程目录</view>
        <hr/>
      </view>
      </view>
  </view>

  <!-- tab对应内容超过滚动 -->
  <view class='contentWrap'>
    <view class='content'>1111</view>
    <view class='content'>1111</view>
    <view class='content'>1111</view>
    <view class='content'>1111</view>
    <view class='content'>1111</view>
    <view class='content'>1111</view>
  </view>

</view>

css:

container样式使用高度为100vh 设置高度为屏幕高度

tab头部和body 用弹性盒子模型来编写，body占据除tab head 部分之外所有的高度

tab对应的内容部分超出显示滚动条滚动

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* 头部 */
.coursePic{
  height: 300rpx;
}

.tabs{
  display: flex;
  flex-direction: row;
  padding: 20rpx 0;
  box-shadow: 0 4rpx 2rpx #ccc;
}

.tab_item{
  flex: 1;
  text-align: center;
}



/* tab对应的内容部分 */
.contentWrap{
  flex: 1;
  width: 100%;
  overflow: scroll;
}
.content{
  height: 400rpx;
}