微信小程序|设置表单界面
问题描述
表单在小程序中非常常见，几乎每一个小程序都会有表单的界面。一些登录界面，身份验证界面，都是由表单来填写信息的。表单的内容有很多，提示性的输入框，手机号码短信验证的输入框以及错误提示输入框等。那么应该如何来设置一个完整的表单界面呢？
解决方案
不同的输入框类型构成了一个完整的表单，需要对不同的输入框进行设置。在json中对相关组件的引入，wxml中进行API的参数配置。
1.在json中调用van-field组件。
代码示例：
"usingComponents": { "van-field": "/dist/field/index" } |
|---|
2.在wxml调用表单组件并对API参数的配置。
Value为当前输入的值，required设置表单必填星号，clearable设置是否启用清除控件，label输入框左侧的文本，placeholder输入框为空时的占位符，error将输入内容标红，border是否显示内边框。
代码示例：
<van-cell-group> <van-field value="{{ number }}" required clearable label="学号" icon="question-o" placeholder="请输入学号" bind:click-icon="onClickIcon" /> </van-cell-group> <van-cell-group> <van-field value="{{ username }}" label="用户名" placeholder="请输入用户名" error /> <van-field value="{{ phone }}" label="手机号" placeholder="请输入手机号" error-message="手机号格式错误" border="{{ false }}" /> </van-cell-group> <van-cell-group> <van-field value="{{ sms }}" center clearable label="短信验证码" placeholder="请输入短信验证码" border="{{ false }}" use-button-slot > <button slot="button" size="mini" type="primary">发送验证码</button> </van-field> </van-cell-group> |
|---|
图 1 效果图
结语
设置表单的时候一定要根据不同的要求对API的参数进行配置。一个简单的输入框仅仅需要一个field标签就够了，但常见的输入框都是五花八门的，这些样式都是由表单的配置参数来设置的，这样就需要掌握熟悉这些参数的性质。
END