zhangdaren
zhangdaren
  • 发布:2021-05-19 11:02
  • 更新:2022-12-14 14:40
  • 阅读:3253

uview组件from-item在小程序与h5里表现一不致(附解决方案)

分类:uni-app

在使用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>

最终效果,”鸡乎一样“ 了

0 关注 分享

要回复文章请先登录注册

zhangdaren

zhangdaren (作者)

回复 令仙僧 :
我写得不对嘛?
2022-12-14 14:40
令仙僧

令仙僧

uView提示:u-form-item需要结合u-form组件使用
2022-12-08 16:11
zhangdaren

zhangdaren (作者)

回复 朕遵旨 :
要去F12调试吧
2022-07-07 10:43
朕遵旨

朕遵旨

楼主,有办法让u-form-item元素不换行吗,我试了display:inline不行,在u-form-item.vue里看源码看不懂
2022-07-06 21:29