flex佈局實現寬或高100% scroll效果

• 寬100%效果

  效果：左邊固定，右邊的可以滑動；

 

<view class="camera-box d-flex">
  <span class="must-icon">*</span>
  <image src="../../static/images/submit_icon/camera.png" class="addPic"></image>
  <view class="upload-img-box d-flex">
    <view class="preview-img" v-for="(image,index) in imageList" :key="index">
      <image class="uploader-img" src="../../static/images/img-01.png"></image>
    </view>
  </view>
</view>

.d-flex{
  display: flex;
}
	
.camera-box{
  .upload-img-box{
    padding: 10rpx 0 10rpx 20rpx;
    flex: 1;
    overflow-x: auto;
			
    .preview-img{
      flex-shrink: 0;
      margin-right: 20rpx;
      padding: 10rpx;
      height: 120rpx;
      width: 120rpx;
      border: 1px solid #e8e8e8;
      border-radius: 5px;
				
      .uploader-img{
        width: 100%;
        height: 100%;
      }			
				
    }
  }
		
  .addPic{
    margin-left: 20rpx;
    width: 120rpx;
    height: 120rpx;
    padding: 10rpx;
    border: 1px dotted #007AFF;
    border-radius: 5px;
  }
}

• 高100%效果

  效果：上面固定，下面的可以滑動；

<view class="index-box d-flex direction-column">
  <view class="scroll-box">
    <scroll-view scroll-y="true" class="scroll-y">
      <view class="container">
        <cardslh :billId="this.userInfo.userid"></cardslh>
      </view>
    </scroll-view>
  </view>
</view>

.d-flex{
  display: flex;
}
	
.direction-column{
  flex-direction: column;
}

page{
  display: flex;
  flex-direction: column;
  min-height: 100%;

  .scroll-box{
    flex: 1;
    display: flex;
    flex-direction: column;

    .scroll-y{
      flex: 1;
      height: 0;

      .container{
        flex-shrink: 0;
      }
    }
  }
}