主机参考
| 主机参考：VPS测评参考推荐/专注分享VPS服务器优惠信息！若您是商家可以在本站进行投稿，查看详情！此外我们还提供软文收录、PayPal代付、广告赞助等服务，查看详情！ |
| 我们发布的部分优惠活动文章可能存在时效性，购买时建议在本站搜索商家名称可查看相关文章充分了解该商家！若非中文页面可使用Edge浏览器同步翻译！PayPal代付/收录合作 |
本文提供了微信小程序的相关知识。 主要介绍一些常见的表单组件如按钮、复选框、输入框、标签等相关问题。 我们一起来看看吧。 我希望这对大家有帮助。
【相关学习推荐：小程序学习教程】
1.常用表单组件 1.1 按钮
是按钮组件。 是常用的表单组件之一，用于触发事件和提交表单。 其属性表如下所示。
代码示例：
7. (1) 迷你按钮 (2)按钮状态 报警按钮 加载按钮 (3)添加按钮事件
1.2 checkbox
是一个复选框组件，常用于选择表单中的多条数据。 复选框 是一个父控件，其中嵌套了多个 子控件。
的属性为：
组件属性：
代码示例：
checkbox 。 wxml
8.Checkbox小case 用for循环批量生成
checkbox.js
Page({ data: { items: [ { name: "Tiger", value: "Tiger" }, {姓名：“邹” 值：“大象” }，{ 名称：“狮子”，值：“狮子”，检查：“true” }，{ 名称：“企鹅”，值：“企鹅” }，{ 名称：“驼鹿”，值： "麋鹿" }, { 名称: "天鹅", 值: "天鹅" }, ] }, checkboxChange:function(e) { console.log("复选框发生了更改事件，值为：", e.detail.value) }})
1.3 input
是输入是一个框组件并包含文本（例如（姓名、年龄等）。 属性表为：
9.输入小写 (1 )文本输入框 (2)密码输入框 (3) 禁用输入框 (4) 添加事件监听输入框
1.4 标签
是标签组件，不会渲染任何效果，但是可以使用。提高表单组件的可用性。 当用户单击标签元素内的文本时，会触发此控件。 换句话说，当用户选择标签时，事件将传递到与该标签关联的表单控件。 您可以使用 for 属性绑定 ID 或在标记内包含空格。 组件对应的属性为：
wxml
10.lable 小案例 (1)使用for属性 大象 ( 2）标签包组件 1.5表单
是一个表单控制组件，用于在表单组件内提交内容。 控件组件中可以嵌套各种组件。
组件的属性为：
form.wxml
11.form小案例 模拟注册功能 用户名： 密码： 手机号码： 验证码： 重置
form.js
Page({ onSubmit(e) { console.log("表单未事件携带数据： ") console.log(e.detail.value) }, onReset() { console.log("表单内发生重置事件，表单被重置") } })
输入后 要注册测试数据，请单击注册按钮以触发表单提交事件。
1.6 radio
是单选按钮组件，经常需要匹配<radio-group&。使用 gt; 组件，并且 标签嵌套在 内。
组件的属性有：
组件的属性为：
radio.wxml
14 .radio 小案例 使用for循环批量生成 {{item.name}}" /> value}}
radio.js
Page({ data: { radioItems: [ { name: 'Tiger', value: 'Tiger' }, { name: '大象', value: '大象' }, { name: 'Lion', value: 'Lion', check: 'true' }, { name: 'Penguin', value: 'Penguin' }, { name: 'Moose', value : '麋鹿' }, { 名称: '天鹅', 值: '天鹅' }, ] }, radioChange:function(e) { console.log("无线电上发生了更改事件。值：", e.detail.value) }})
1.7 slider
是滑动选择器。 用于直观地动态更改变量的值。 属性表为：
slider.wxml
15 小写。 (1)滑块右侧显示当前进度值 (2)自定义滑块颜色和滑块样式 (3) 禁用滑块 <Slider 禁用 (4)添加滑块监听事件
1.8 switch
是一个开关选择器，通常用于切换表单上的功能。 属性表如下。
switch.wxml
16.switch 小案例 添加switch事件监听 </view>
1.9 textarea
是多行输入框，常用于输入多行文本。
2. 小型实战案例-问卷调查
survey.wxml
1.你现在几岁？ 新生第二年 第三年高级 2.手机最大的用途是什么？ bindingchange="mobileChange"> 3.您每天使用手机的时间是多少？ 4.您使用过微信小程序吗？是 5.请告诉我们您对微信小程序未来发展的看法
survey.js
Page({ UniversityChange: function (e) { console.log("当前选择的大小是多少：", e.detail.value) }, MobilityChange:函数（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("表单重置") }})
【相关学习推荐：小程序学习教程】
下载微信App
微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！
这几篇文章你可能也喜欢：
- 使用异步/异步/等待微信开发（小程序异步/等待支持）
- 微信系的图像处理（中心和全屏）（微信小程序设置图像位置和大小）
- 介绍微信小程序中的wxs模块并展示如何使用（微信小程序中如何使用该模块，代码解释）
- 快速为你的微信小程序实现一个按钮组件（你的小程序中的按钮有哪些类型？）
- 微信小程序页面开发（微信小程序开发教程手册）
本文由主机参考刊发，转载请注明：总结整理微信小程序常用表单组件（微信小程序表单设计） https://zhujicankao.com/141160.html
评论前必须登录！
注册