微信小程序示例 - 表单

时间:2022-05-07
本文章向大家介绍微信小程序示例 - 表单,主要内容包括滚动选择器 picker、多选 checkbox、滑动选择器 slider、开关选择器 switch、表单提交、源码下载、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

滚动选择器 picker

代码结构

// wxml
<picker bindchange="bindChange" value="{{index}}" range="{{array}}">
      当前选择:{{array[index]}}
</picker>

// js
Page({
    data: {
        array: ['美国', '中国', '巴西'],
        index: 0
    },
    bindPickerChange: function(e) {
        console.log('picker 值为:', e.detail.value)
        this.setData({
          index: e.detail.value
        })
    }
})

多选 checkbox

代码结构

<checkbox-group>中包含多项<checkbox>

<checkbox-group>
    <checkbox value="" checked=""/>name
    ...
</checkbox-group>

<checkbox-group>中可以绑定change事件

// wxml
<checkbox-group bindchange="checkboxChange">
...
</checkbox-group>

// js
checkboxChange: function(e) {
    console.log('value:', e.detail.value)
}

滑动选择器 slider

代码结构

<slider bindchange="sliderchange" step="5" min="50" max="200" show-value/>

sliderchange:function(e) {
  console.log('slider 值为', e.detail.value)
}

开关选择器 switch

代码结构

<switch checked="{{isChecked}}" bindchange="switchChange"/>

switchChange: function (e){
    console.log('switch值为', e.detail.value)
}

表单提交

使用form组件,其中放入各类表单组件,然后使用submit类型的button触发提交事件,处理函数中可以得到所有的表单数据

示例代码

// wxml
<form bindsubmit="formSubmit">
  <switch name="switch"/>
  <slider name="slider"></slider>
  <button formType="submit">Submit</button>
</form>

// js
formSubmit: function(e) {
    console.log('提交的所有数据:', e.detail.value)
}

源码下载