微信小程序中input表单与redio及下拉列表的使用

1. input表单与radio使用

1.1 input表单的基本使用

在微信小程序中，input表单是常见的用户输入方式，可以利用input表单进行用户信息的收集以及各种表单的填写。

input标签中含有type属性，可以控制输入框的类型，比如text、password、number等。

下面是一个简单的input表单的示例代码：

<view class="input-section">

  <view class="label">请输入用户名:</view>
  <input class="input" type="text" placeholder="请输入用户名" bindinput="onUsernameInput"/>
</view>

其中，type="text"表示输入框的类型为文本，placeholder属性表示输入框中的提示信息，bindinput属性表示绑定输入框的输入事件，onUsernameInput为对应的事件处理函数。

1.2 radio的基本使用

radio是单选框，通常用于在几个选项中选择一个。在微信小程序中，可以使用radio组件来实现单选框。

下面是一个简单的radio组件的示例代码：

<view class="radio-section">

  <view class="radio-label">请选择性别:</view>
  <radio-group bindchange="onGenderChange">
    <label class="radio-item">
      <radio value="male" checked="{{gender == 'male'}}"/>
      <text class="radio-text">男</text>
    </label>
    <label class="radio-item">
      <radio value="female" checked="{{gender == 'female'}}"/>
      <text class="radio-text">女</text>
    </label>
  </radio-group>
</view>

其中，radio-group标签表示单选框组，bindchange属性表示绑定单选框组的值改变事件，onGenderChange为对应的事件处理函数。radio标签表示单选框，value属性表示单选框的值，checked属性表示单选框是否选中。

2. 下拉列表的使用

2.1 下拉列表的基本使用

下拉列表通常用于在多个选项中选择一个，与单选框类似。在微信小程序中，可以使用picker组件来实现下拉列表。

下面是一个简单的picker组件的示例代码：

<view class="picker-section">

  <view class="picker-label">请选择城市:</view>
  <picker mode="selector" bindchange="onCityChange" value="{{cityIndex}}" range="{{cities}}">
    <view class="picker-text">{{cities[cityIndex]}}</view>
  </picker>
</view>

其中，picker标签表示下拉列表，mode属性表示选择器类型，selector表示选择器，bindchange属性表示绑定下拉列表的值改变事件，onCityChange为对应的事件处理函数。value属性表示下拉列表的值的索引，range属性表示下拉列表的所有选项，cities为对应的数据。picker标签内部可以添加一个或多个view标签，表示下拉列表的显示内容，可以自定义样式。

2.2 下拉列表的数据源

下拉列表的数据源通常是一个数组，可以通过setData方法向页面中传递数据。在下拉列表的dataChange事件中，通过getPickerData方法获取下拉列表的数据源。

下面是一个简单的向页面中传递数据并获取下拉列表数据源的示例代码：

Page({

  data: {
    cities: [] //存储下拉列表的数据源
  },
  onLoad: function () {
    this.setData({
      cities: ['北京', '上海', '广州', '深圳'] //向页面中传递数据
    })
  },
  onCityChange: function (event) {
    var cityIndex = event.detail.value
    var city = this.getPickerData(this.data.cities, cityIndex)
    //获取下拉列表的数据源
  },
  getPickerData: function (data, index) {
    return data[index]
  }
})

在onLoad事件中，向页面中存储一个数组cities，作为下拉列表的数据源。在onCityChange事件中，使用getPickerData方法，获取下拉列表的数据源。

3. 总结

在微信小程序中，input表单、radio和下拉列表都是常见的用户输入方式，广泛应用于各种表单的填写和信息的收集。input表单可以控制输入的类型，并可以获取用户输入的内容。radio和下拉列表用于在多个选项中进行单选操作，通常情况下，数据源是一个数组，可以传递给页面。