2022归纳整理微信小程序常用表单组件

 所属分类:php教程

 浏览:131次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了一些常用表单组件,包括了button、checkbox...
更多教程资料进入php教程获得。 本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了一些常用表单组件,包括了button、checkbox、input、label等等相关问题,下面一起来看一下,希望对大家有帮助。

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

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

1、常用表单组件

1.1 button

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

image-20220316230043016

代码示例:


  7.button小案例
  (1)迷你按钮
  
  
  
  (2)按钮状态
  
  
  
  (3)增加按钮事件
  
登录后复制

image-20220316230647877

1.2 checkbox

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

  <checkbox-group>属性如下:

image-20220316230921345

  <checkbox>组件的属性如下:

image-20220316230938489

代码示例:

checkbox.wxml


  8.checkbox小案例
  利用for循环批量生成
  
    
  
登录后复制

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)
  }})
登录后复制

image-20220316231231567

1.3 input

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

image-20220316231356590


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

image-20220316231738656

1.4 label

  <label>是标签组件,不会呈现任何效果,但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时,就会触发此控件,即当用户选择该标签时,事件会传递到和标签相关的表单控件上,可以使用for属性绑定id,也可以将空间放在该标签内部,该组件对应属性如下所示。

image-20220316231948513

wxml


  10.lable小案例
  (1)利用for属性
  
    
    
    
    
    
    
  
  (2)label包裹组件
  
    
    
    
  
登录后复制

1.5 form

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

  组件属性如下:

image-20220316232327454

form.wxml


  11.form小案例
  模拟注册功能
  
用户名: 密码: 手机号: 验证码:
登录后复制

form.js

Page({
  onSubmit(e) {
    console.log("form发生了submit事件,携带数据为:")
    console.log(e.detail.value)
  },
  onReset() {
    console.log("form发生了reset事件,表单已被重置")
  }})
登录后复制

  输入测试数据后点击注册按钮触发表单提交事件。

image-20220316232522849

1.6 radio

  <radio>为单选框组件,往往需配合<radio-group>组件来使用,<radio>标签嵌套在<radio-group>当中。

  <radio-group>组件属性如下:

image-20220316232712336

  <radio>组件属性如下:

image-20220316232729258

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)
  }})
登录后复制

image-20220316232846608

1.7 slider

  <slider>为滑动选择器,用于可视化地动态改变某变量地取值。属性表如下:

image-20220316232948144

slider.wxml


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

image-20220316233102160

1.8 switch

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

image-20220316233202175

switch.wxml


  16.switch小案例
  增加switch事件监听
  
  
登录后复制

image-20220316233254798

1.9 textarea

  <textarea>为多行输入框,常用于多行文字的输入。

2、实训小案例–问卷调查

survey.wxml


  
1.你现在大几? 大一 大二 大三 大四 2.你使用手机最大的用途是什么? 3.平时每天使用手机多少小时? 4.你之前有使用过微信小程序吗? 5.谈谈你对微信小程序未来发展的看法
表情  文明上网,理性发言!