收藏
回答

关于flex布局显示问题

问题模块
API和组件

当使用flex布局时,无论view的高度使用超出屏幕高度,在苹果手机上的显示都会出现可上下滑动的情况,在安卓手机上显示正常。 代码示例:新建一个工程时的index页面。

-------------------- wxml -------------------

<view class="container">

  <view  bindtap="bindViewTap" class="userinfo">

    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

    <text class="userinfo-nickname">{{userInfo.nickName}}</text>

  </view>

  <view class="usermotto">

    <text class="user-motto">{{motto}}</text>

  </view>

</view>



-------------------- wxss -------------------

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  padding: 200rpx 0;

  box-sizing: border-box;

.userinfo {

  display: flex;

  flex-direction: column;

  align-items: center;

}


.userinfo-avatar {

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}


.userinfo-nickname {

  color: #aaa;

}


.usermotto {

  margin-top: 200px;

}


最后一次编辑于  2017-09-06  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答