关于flex布局显示问题
发布于 5 年前 作者 hejing 5372 次浏览 来自 问答

当使用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;

}

回到顶部