在使用uview组件开发项目时,使用下面代码,碰到一个问题:
代码为:
<u-form class="from-submit" ref="uForm" label-width="160" :error-type="['toast', 'border-bottom']">
<u-form-item label="上课时间" prop="beginTime" class="u-flex" :required="true">
<view>xxx</view>
<text class="label-text">至</text>
<view>xxx</view>
</u-form-item>
</u-form>
大家看图:

可以发现,同一套代码,在两个平台,表现的却不是一致的。
同样是选择from-item,他们的显示区域却不尽相同。
虽然看起来样式差不多,但表现却不一致,通过调试,最终得到解决方案:
给from-item下面的view元素,添加 display:inline-flex 样式即可
最终代码(非优化代码,仅作示例):
<u-form class="from-submit" ref="uForm" label-width="160" :error-type="['toast', 'border-bottom']">
<u-form-item label="上课时间" prop="beginTime" class="u-flex" :required="true">
<view style="display: inline-flex;">xxx</view>
<text class="label-text">至</text>
<view style="display: inline-flex;">xxx</view>
</u-form-item>
</u-form>
最终效果,”鸡乎一样“ 了