归纳整理微信小程序常用表单组件（微信小程序图表组件）

归纳整理微信小程序常用表单组件（微信小程序图表组件）

本篇文章给大家带来了关于

微信小程序

的相关知识，其中主要介绍了一些常用表单组件，包括了button、checkbox、input、label等等相关问题，下面一起来看一下，希望对大家有帮助。

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

【相关学习推荐：小程序学习教程】

1、常用表单组件

1.1 button

为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。

代码示例：

7.button小案例 (1)迷你按钮 主要按钮 次要按钮 警告按钮 (2)按钮状态 普通按钮 警用按钮 加载按钮 (3)增加按钮事件 点我获取用户信息-

1.2 checkbox

为复选框组件，常用于在表单中进行多项数据的选择。复选框的为父控件，其内部嵌套若干个子控件。

属性如下：

组件的属性如下：

代码示例：

checkbox.wxml

8.checkbox小案例 利用for循环批量生成 {{item.value}} -

checkbox.js

Page({ data: { items: [ { name: "tiger", value: "老虎" }, { name: "elephant", value: "大象" }, { name: "lion", value: "狮子", checked: "true" }, { name: "penguin", value: "企鹅" }, { name: "elk", value: "麋鹿" }, { name: "swan", value: "天鹅" }, ] }, checkboxChange:function(e) { console.log("checkbox发生change事件，携带value值为：", e.detail.value) }})-

1.3 input

为输入框组件，常用于文本(如姓名、年龄等信息)的输入。属性表如下：

9.input小案例 (1)文字输入框 (2)密码输入框 (3)禁用输入框 (4)为输入框增加事件监听 -

1.4 label

wxml

10.lable小案例 (1)利用for属性 老虎 大象 狮子 (2)label包裹组件 老虎 大象 狮子 -

1.5 form

为表单控件组件，用于提交表单组件中的内容。控件组件内部可以嵌套多种组件。

组件属性如下：

form.wxml

11.form小案例 模拟注册功能 用户名: 密码: 手机号: 验证码: 注册 重置 -

form.js

Page({ onSubmit(e) { console.log("form发生了submit事件，携带数据为：") console.log(e.detail.value) }, onReset() { console.log("form发生了reset事件，表单已被重置") }})-

1.6 radio

为单选框组件，往往需配合组件来使用，标签嵌套在当中。

组件属性如下：

组件属性如下：

radio.wxml

14.radio小案例 利用for循环批量生成 {{item.value}} -

radio.js

Page({ data: { radioItems: [ { name: 'tiger', value: '老虎' }, { name: 'elephant', value: '大象' }, { name: 'lion', value: '狮子', checked: 'true' }, { name: 'penguin', value: '企鹅' }, { name: 'elk', value: '麋鹿' }, { name: 'swan', value: '天鹅' }, ] }, radioChange:function(e) { console.log("radio发生change事件，携带value值为：", e.detail.value) }})-

1.7 slider

为滑动选择器，用于可视化地动态改变某变量地取值。属性表如下：

slider.wxml

15.slider小案例 (1)滑动条右侧显示当前进度值 (2)自定义滑动条颜色与滑块样式 (3)禁用滑动条 (4)增加滑动条监听事件 -

1.8 switch

为开关选择器，常用于表单上地开关功能，属性表如下所示。

switch.wxml

16.switch小案例 增加switch事件监听 -

1.9 textarea

为多行输入框，常用于多行文字的输入。</p><p>2、实训小案例–问卷调查</p><p>survey.wxml</p><p>1.你现在大几？ 大一 大二 大三 大四 2.你使用手机最大的用途是什么？ 社交 网购 学习 其他 3.平时每天使用手机多少小时？ 4.你之前有使用过微信小程序吗？ 无 有 5.谈谈你对微信小程序未来发展的看法 提交 重置 -</p><p>survey.js</p><p>Page({ universityChange: function (e) { console.log("你选择的现在大几：", e.detail.value) }, mobilChange: function (e) { console.log("你选择使用手机的最大用途是：", e.detail.value) }, timechange: function (e) { console.log("你选择的每天使用手机的时间是：", e.detail.value + "小时") }, programChange: function (e) { console.log("你选择的是否使用过微信小程序：", e.detail.value) }, onSubmit(e) { console.log("你输入的对小程序发展前途的看法是："+e.detail.value.textarea) }, onReset() { console.log("表单已被重置") }})-</p><p>【相关学习推荐：小程序学习教程】</p><p> <strong>版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。</strong> </p></div> <div class="article_footer clear"> <div class="fr tag">标签：<a href="https://www.finclip.com/news/tags-85.html">js</a> <a href="https://www.finclip.com/news/tags-80.html">数据</a> </div> <div class="bdsharebuttonbox fl share"> <div class="share-widget fl"> <div class="social-share" data-sites="wechat,weibo, qq, qzone"></div> </div> </div> </div> <!-- 广告位ad4 --> <div class="post-navigation clear"> <div class="post-previous fl"> <span>上一篇:</span><a href="https://www.finclip.com/news/f/13651.html">64位windows上访问64位oracle 12c</a> </div> <div class="post-next fr"> <span>下一篇:</span><a href="https://www.finclip.com/news/f/13655.html">网页中打开exe</a> </div> </div> </div> <div class="related_article"> <div class="box_title clear"> <span><i class="icon fa fa-paper-plane"></i>相关文章</span> </div> <div class="related_list clear"> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/87442.html"><img src="https://www.finclip.com/news/zb_users/cache/ly_autoimg/o/ODc0NDI.jpg"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/87442.html" title="微信开发中 ACCESS TOKEN 过期失效的解决方案详解">微信开发中 ACCESS TOKEN 过期失效的解决方案详解</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1297</span> <span><i class="fa fa-clock-o"></i>2022-09-29</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/87441.html"><img src="https://www.finclip.com/news/zb_users/upload/2024/09/202409101725934467521167.png"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/87441.html" title="微信小程序利用 JS 实现注册 60s 倒计时功能解析">微信小程序利用 JS 实现注册 60s 倒计时功能解析</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1297</span> <span><i class="fa fa-clock-o"></i>2022-09-29</span> </div> </div> </article> <article class="fl"> <div class="related_img"><a href="https://www.finclip.com/news/f/87435.html"><img src="https://www.finclip.com/news/zb_users/upload/2024/09/202409101725933990851098.png"></a></div> <div class="related_detail"> <h3><a href="https://www.finclip.com/news/f/87435.html" title="微信小程序本地存储与登录页面处理实例详细讲解">微信小程序本地存储与登录页面处理实例详细讲解</a></h3> <div class="meta"> <span><i class="fa fa-eye"></i>1297</span> <span><i class="fa fa-clock-o"></i>2022-09-29</span> </div> </div> </article> </div> </div> <div id="comment" class="post-comment clearfix sb br mt"> <p id="comments-title" class="c-title mb bn"><span><i class="fa fa-pencil"></i> 发表评论</span></p> <div class="compost"> <form id="frmSumbit" target="_self" method="post" action="https://www.finclip.com/news/zb_system/cmd.php?act=cmt&postid=13654&key=0130ce2c35e05abede92d831d29f4c25"> <input type="hidden" name="inpId" id="inpId" value="13654"/> <input type="hidden" name="inpRevID" id="inpRevID" value="0"/> <div class="com-name"> <a rel="nofollow" id="cancel-reply" href="#comments" style="display:none;">取消回复</a> </div> <div class="com-info"> <ul> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpName" id="inpName" value="" tabindex="2" placeholder="昵称(必填)"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpEmail" id="inpEmail" value="" tabindex="3" placeholder="邮箱"> </li> <li> <span class="hide" for="author"></span> <input class="ipt" type="text" name="inpHomePage" id="inpHomePage" value="" tabindex="4" placeholder="网址"> </li> </ul> </div> <div class="com-box"> <textarea placeholder="来都来了，说点什么吧..." class="textarea" name="txaArticle" id="txaArticle" cols="5" rows="5" tabindex="1">