专栏首页算法与编程之美微信小程序|设置表单界面

微信小程序|设置表单界面

问题描述

表单在小程序中非常常见,几乎每一个小程序都会有表单的界面。一些登录界面,身份验证界面,都是由表单来填写信息的。表单的内容有很多,提示性的输入框,手机号码短信验证的输入框以及错误提示输入框等。那么应该如何来设置一个完整的表单界面呢?

解决方案

不同的输入框类型构成了一个完整的表单,需要对不同的输入框进行设置。在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

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 大数据时代的信息获取

    人们最初,信息获取的方式单一,但是获取信息的准确性更加的高。互联网时代,亦是大数据时代。新时代的数据有以下几点基本特征,数据量大、类型繁多、价值密度低、速度快、...

    算法与编程之美
  • 前端|Bootstrap 实例 - 简单的轮播插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要...

    算法与编程之美
  • 微信小程序|页面的生命周期函数onLoad

    相信小程序的初学者对js页面是很模糊的总感觉看不懂,其实js页面总的来说就是一个Page()函数。用Page()函数来注册一个页面,接受一个object参数,实...

    算法与编程之美
  • iOS开发中利用dispatch group实现并发多任务

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

    用户1451823
  • 生存分析-黑、白、许多灰

      1.点击链接[GDC Data],选择界面右下角Legacy Archive(https://portal.gdc.cancer.gov/)

    生信技能树
  • 数说:这只程序员组建的乐队为何能进HOT5?

    上周六晚,爱奇艺的独家综艺《乐队的夏天》总决赛终于落下了帷幕,虽然决赛过程有些“曲折”,但是我最喜欢的刺猬乐队,仍然凭借自己的硬实力,最终排在第二名!

    用户1564362
  • 会唱歌的程序员为何如此受欢迎?

    上周六晚,爱奇艺的独家综艺《乐队的夏天》总决赛终于落下了帷幕,虽然决赛过程有些“曲折”,但是我最喜欢的刺猬乐队,仍然凭借自己的硬实力,最终排在第二名!

    数据森麟
  • 数说:这只程序员组建的乐队为何能进HOT5?

    上周六晚,爱奇艺的独家综艺《乐队的夏天》总决赛终于落下了帷幕,虽然决赛过程有些“曲折”,但是我最喜欢的刺猬乐队,仍然凭借自己的硬实力,最终排在第二名!

    朱小五
  • 使数组唯一的最小增量

    第一种:暴力解决 用数组统计每个数出现的次数,每次递增1,直到增加到一个没有重复出现过得数字位置。这种时间复杂度大,可以为 O(n^2)

    木子星兮

扫码关注云+社区

领取腾讯云代金券