uni-app中uni-form设置label-position=”top“时刚进入页面页面先是左右，然后才变成上下问题

最新推荐文章于 2024-02-22 15:09:54 发布
最新推荐文章于 2024-02-22 15:09:54 发布
阅读量2.1k 收藏 1
点赞数 3
文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43294027/article/details/125789050
版权
在uni-app中遇到uni-form组件的label-position属性设置为'top'时，页面初次加载显示异常，表现为先显示为左右布局后瞬间变为上下布局。通过分析，确定为生命周期问题导致。将uni-form的初始化方法从mouted移到created中，成功解决了这个问题，避免了闪烁现象。这是一个关于uni-app和小程序开发的调试技巧。
摘要由CSDN通过智能技术生成

uni-app中uni-form设置label-position=”top“时刚进入页面页面先是左右，然后才变成上下问题

使用uni-app开发小程序，再做表单提交的时候因为要验证，使用了uni-app的组件uni-forms，开发完成手机上进行调试之后，发现每次进入表单页都是先默认左右排布，闪一下才变成上下

原因分析：

可能是uni-form组件默认影响，文档确实写了默认是label-position=”left“，那我赋值了top生效了，但是生效的有点慢，这个就要考虑生命周期了

解决方案：

在这里插入图片描述
这里我把他的init方法从mouted中放到了created中就解决了！

看到文章的话说明我们有缘，点赞评论一下鼓励鼓励博主，这样会更有动力哦，谢谢啦！！！

BIGWEB_ZHANG
关注
uni-app实战之社区交友APP（9）我的页面开发
CUFEECR的博客
02-04 3829
个人中心页面需要配置导航栏标题、菜单按钮等；个人中心需要实现顶部个人信息栏、互动信息栏、广告位、浏览历史、社区认证和审核帖子，使用uni-list-item组件；设置页入口是个人中心页面。修改密码页面入口在设置页；需要验证后两次密码相同；修改邮箱页面入口也是设置页，需要验证邮箱格式。编辑资料页也使用uni-list-item实现；修改头像使用图片上传接口实现；修改昵称使用输入框，修改性别、情感和职业使用接口；修改生日使用picker组件；城市选择使用三级联动城市选择器。开发帮助反馈页面；开发关于页面。
uni-app 表单验证
qq_32914215的博客
01-21 5530
uni 表单验证 本文只用做记录及学习使用 <uni-forms modelValue="formData" ref="setPwdForm" :rules="rules"> <uni-forms-item label="手机号:"> <uni-easyinput type="number" v-model="formData.phone" maxlength="11" placeholder="请输入11位电话号码" /> </uni-forms-item
Element-UI组件之el-form标签右对齐，label-position不生效
qq_30716265的博客
10-25 7362
el-form标签右对齐，label-position不生效
label-position设置为top时，label自动居中了
qq_32555123的博客
04-05 1178
label-position设置为top时，label自动居中了 .el-form–label-top { text-align: left !important; }
ElementUI el-form组件label-position=“top“不生效，input组件和label没有换行展示问题
最新发布
ljr318318的博客
02-22 1460
解决方案：设置下el-form的属性。
label-position不生效
南北极之间
07-12 1万+
本来想向右对齐。结果 不生效： 解决办法： lable-position 和 label-width一起使用！ 通过 label-position 属性来改变表单域或标签的位置，可选的值有 top/left/right ，默认的是 right ，lable-position 必须要和 label-width（表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值） 共同使用，才会生效。 <el-form ref="loginForm"
uniapp-form表单
xiaoququ的博客
08-23 993
【代码】uniapp-form表单。
解决el-form的label和el-input不在同一行问题
m0_46544598的博客
10-27 3347
解决el-form的label和el-input不在同一行问题
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 896
微信小程序和uni-app面试高频知识点
工作317:uni-修改其他页面整体样式
歌谣的博客
01-19 453
<template> <view class="wrap"> <u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType"> <u-form-item label="标题" class="label-left" style="margin-left:30rpx" prop="title"> <u-input v-model="form.title" p
自学uni-app （3）uni-app的常用组件
Slow down your pace
08-06 2581
uni-app可用于跨平台，支持app平台、h5平台、小程序平台 一次编写，多平台生成
el-form的label-position不生效的问题
weixin_43305450的博客
06-28 2443
el-form的label-position不生效的问题
label-position--提问
weixin_45439337的博客
02-21 3297
label-position–提问 本系列文章是在开发过程中发现一些问题所记录下来，所有在文章中所发现的问题还存在一些问题没有解决，希望大佬看到的话可以指教一下。 情况描述： 在开发过程中使用 label-position="top" 来实现效果。下图 <van-form label-position="right"> 然后我本着好奇心思考为什么这样是可行的，label-position的默认值是right。 然后找到了问题所在，实际上就是一个type样式。 在寻找原因的过
uni-app之表单组件教程玩转交互式表单
码奴一只猿
06-21 2875
在UniApp中，表单组件是构建用户交互的重要元素。本教程将详细介绍UniApp中的各种表单子组件，包括(button、checkbox、editor、form、input、label、picker、picker-view、radio、slider、switch和textarea)，并提供详细的示例代码。
避坑指南：uni-forms表单在uni-app中的实践经验
唯见青山不见君
12-19 6303
避坑指南：uni-forms表单在uni-app中的实践经验
标准盒模型与怪异盒模型 -form表单input对齐问题引发探讨及解决方案
KOYAANISS的博客
02-23 597
标准盒模型与怪异盒模型 -form表单iput对齐问题引发探讨及解决方案 form表单中的input对齐问题： 用form表单input元素组合搜索框的时候，我们会发现两个同样设置30px高度input元素高度有相差，而无法上下对齐。 同样是相同高度的input元素怎么会出现高度不一致的结果呢？ 究其原因是因为两个input的盒模型不同表现形式导致的，一个标准盒模，另一个是怪异盒模型。 首先来来...
el-form表单使用label-position出现的问题
weixin_53853031的博客
10-17 4534
el-form使用label-position出现的问题
uview 中使 u-form 的 u-form-item 内容右移 slot=“right“
热门推荐
名人卷耶
11-24 1万+
<u-form-item label-width="130" label="接收推送" prop="intro"> <!-- 此处switch的slot为right，如果不填写slot名，也即 u-switch 将会左对齐 --> <u-switch v-model="popForm.accept" size="35" active-color="#216fff" slot="right"></u-switch> </u-form-item&g.
uni-forms-item 标签label怎么变宽
weixin_60415789的博客
04-19 6450
uni-forms-item label="姓名" :label-style="width: '100px'}" ></uni-forms-item><uni-forms-item label="姓名" class="custom-label-width"> </uni-forms-item><uni-forms-item label="姓名" label-width="100px" ></uni-forms-item>--input 元素或其他表单控件 --input 元素或其他表单控件 -->
uni-forms-item label 宽度
06-02
uni-forms-item 的 label 宽度可以通过设置 label-width 属性来实现。该属性的值可以是一个 CSS 长度值或者一个百分比值。例如，设置 label 宽度为 100px： ```html <uni-forms-item label="姓名" label-width="100px"> <uni-input></uni-input> </uni-forms-item> ``` 或者设置 label 宽度为表单宽度的 30%： ```html <uni-forms-item label="姓名" label-width="30%"> <uni-input></uni-input> </uni-forms-item> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值