上部固定位置，下部滚动占满视图

方法一：（可滑动）

css

====

.swiper-tab{
width: 100%;
height: 60rpx;
line-height: 60rpx;
}
.swiper-tab-list{
font-size: 28rpx;
display: inline-block;
width: 20%;
color: #777777;
text-align: center;
}
.on {
color: black;
border-bottom: 8rpx solid red;
font-weight: bold;
}

.swiper-box{
display: flex;
flex-direction: column;
}
.swiper-box view{
text-align: center;
}
.swiper-item{
background: #23bff3;
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
top: 16rpx;
bottom: 0px;
left: 0px;
overflow:auto;
}
 
 
JS
====
<view class="swiper-tab">
<view class="swiper-tab-list {{menuTapCurrent==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">基本</view>
<view class="swiper-tab-list {{menuTapCurrent==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">三史</view>
<view class="swiper-tab-list {{menuTapCurrent==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">病历</view>
<view class="swiper-tab-list {{menuTapCurrent==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">医嘱</view>
<view class="swiper-tab-list {{menuTapCurrent==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">待办</view>
</view>



<swiper current="{{menuTapCurrent}}" class="swiper-box" duration="200" style="height:{{winHeight - 38}}px" bindchange="bindChange">
<!-- 基本 -->
<swiper-item class='swiper-item bk-red'>
<scroll-view scroll-y="true">
<item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" />
<item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" />
</scroll-view>
</swiper-item>

<!-- 三史 -->
<swiper-item >

</swiper-item>

<!-- 病历 -->
<swiper-item>
<view>
33333
</view>
</swiper-item>
 
<!-- 医嘱 -->
<swiper-item>
<view>
444444
</view>
</swiper-item>
 
<!-- 待办 -->
<swiper-item>
<view>
555555
</view>
</swiper-item>

</swiper>

 

 

 

 

方法二：(固定view不能滑动)

=========================
.menu_box{
display: flex;
height: 80rpx;
}
.menu1,.menu2{
flex: 1;
font-size:30rpx;
line-height: 80rpx;
text-align: center;
}
.borders{
border-bottom: 4rpx solid #f00;
color: #f00;
}
.tab1,.tab2{
background: #23bff3;
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
top: 80rpx;
bottom: 0px;
left: 0px;
overflow:auto;
}
.tab2{
background: #ccc;
}
 
js.
=====

<view class="menu_box">
<text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text>
<text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!='0'}}">
<item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" />
<item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name" img="../../images/my.png" title="姓名" show_desc="{{true}}" desc="aaa" url="/pages/text_input/index" /> <item-text-nav id="name"
</view>
<view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>

 
 
 
 
 
posted @ 2018-06-26 21:43  doctorsun  阅读(218)  评论(0)    收藏  举报