view的高度(height)用百分比的话加入form后view布局就变了,不用百分比就不会为什么?
发布于 6 年前 作者 fengjie 7184 次浏览 来自 官方Issues

view的高度如果用百分比(如20%), 外面加上<form>后布局就变了,如果高度用具体尺寸(100px)而不用百分比,外面加上form就没事。不能用百分比吗?代码框架如下(两段代码的差异就只是红色部分,别的都一样):
1、用百分比时,加入form后布局会被改变:
  <form bindsubmit="formSubmit">
  <view style="height:90%;display:flex;flex-direction:column;justify-content:center;background-color:#ffffff;">
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ff0000;">
       <text>Welcome</text>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ffff00;">
       <text>账号</text><input style="background-color:#c0c0c0;"></input>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#008000;">
       <text>密码</text><input style="background-color:#c0c0c0;"></input>
    </view>  
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#0000ff;">
       <button form-type="submit" size="default" type="primary" >Enter</button>
    </view>
  </view>
  </form>



2、用具体长度时,加入form后布局不会变:
  <form bindsubmit="formSubmit">
  <view style="height:400px;display:flex;flex-direction:column;justify-content:center;background-color:#ffffff;">
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ff0000;">
       <text>Welcome</text>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#ffff00;">
       <text>账号</text><input style="background-color:#c0c0c0;"></input>
    </view>
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#008000;">
       <text>密码</text><input style="background-color:#c0c0c0;"></input>
    </view>  
    <view style="height:25%;display:flex;justify-content:center;align-items:center;background-color:#0000ff;">
       <button form-type="submit" size="default" type="primary" >Enter</button>
    </view>
  </view>
  </form>


-------------------------[end]---------------------------------

3 回复

试试rpx或者vh

宽高设置百分比都是相对上一级的,如果没有设置的话就会根据子元素的宽高来撑开,你外面套一层form没有设置高度所以出现了上面的问题,你把form高度设置100%或者固定的高度就可以了。

应该是两者之间的冲突,form 表单中的提交 button 固定了格式之类的…

回到顶部