uniapp flex 自适应高度 区域里面内容滚动

javascript语言,uniapp 2020-07-22

如下代码,想在页面box中,content固定高度,box-c区域填满其他区域,scroll-view 区域内滚动

<view class="box">
  <view class="content">
   hello
  </view>
  <swiper class="box-c">
   <swiper-item class="child">
    <scroll-view :scroll-y="true">
       足够高的滚动区域
    </scroll-view>
   </swiper-item>
  </swiper>
 </view>

样式如下

 .box{
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  background-color: #ffffff;
  height: 100vh;
 }
 .content{
  height: 70upx;
  background: #CCCCCC;
 }
 .box-c,.child{
  display: flex;
  flex: 1;
 }

总结:swiper 和 swiper-item 都要做填满操作,否则不成功


本文由 wenyi 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论