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

我来为你详细讲解 “微信小程序 input表单与redio及下拉列表的使用实例”的完整攻略。

1. input表单的使用

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

<view class="form-item">
  <view class="form-item-label">姓名</view>
  <input name="name" placeholder="请输入姓名" />
</view>

上面的代码中，我们创建了一个 input 输入框，并指定了 input 的 name 和 placeholder 属性。我们可以通过 name 来获取用户的输入，也可以通过 placeholder 在输入框中显示提示文字。

2. radio按钮的使用

下面是一个简单的 radio 按钮示例：

<view class="form-item">
  <view class="form-item-label">性别</view>
  <radio-group bindchange="onGenderChange">
    <label class="radio" wx:for="{{genderArray}}">
      <radio value="{{item.value}}" checked="{{item.checked}}" />
      {{item.name}}
    </label>
  </radio-group>
</view>

上面的代码中，我们创建了一个 radio-group 单选框组，并通过 wx:for 属性使用 genderArray 数组来循环渲染选项。我们还绑定了一个 onGenderChange 事件处理函数，当用户选择单选框时会触发该事件，并传递选项值给我们的函数。

在 js 文件中，我们可以通过如下方式获取用户选择的值：

Page({
  data: {
    genderArray: [
      { name: '男', value: 'male', checked: true },
      { name: '女', value: 'female', checked: false }
    ],
    gender: 'male', // 默认选中男性
  },
  onGenderChange: function (event) {
    this.setData({
      gender: event.detail.value
    })
  }
})

在 data 中我们定义了一个 genderArray 数组用来存储选项，以及一个 gender 变量用来存储用户选择的值。通过 onGenderChange 函数，我们可以获取用户选择的值并更新数据。

3. 下拉列表的使用

下面是一个简单的下拉列表示例：

<view class="form-item">
  <view class="form-item-label">城市</view>
  <picker mode="selector" range="{{cityArray}}" bindchange="onCityChange">
    <view class="picker">
      {{city}} <image src="/images/down.png" />
    </view>
  </picker>
</view>

上面的代码中，我们创建了一个 picker 下拉列表，并通过 range 属性使用 cityArray 数组来循环渲染选项。我们还绑定了一个 onCityChange 事件处理函数，当用户选择下拉列表时会触发该事件，并传递选项值给我们的函数。

在 js 文件中，我们可以通过如下方式获取用户选择的值：

Page({
  data: {
    cityArray: ['北京', '上海', '广州', '深圳', '杭州'],
    cityIndex: 0,
    city: '北京', // 默认选中北京
  },
  onCityChange: function (event) {
    const index = event.detail.value
    const city = this.data.cityArray[index]
    this.setData({
      cityIndex: index,
      city: city
    })
  }
})

在 data 中我们定义了一个 cityArray 数组用来存储选项，一个 cityIndex 变量用来存储用户选择的索引值，以及一个 city 变量用来存储用户选择的值。通过 onCityChange 函数，我们可以获取用户选择的索引值，并从 cityArray 数组中获取对应的值，并更新数据。

这就是关于“微信小程序 input表单与redio及下拉列表的使用实例”的完整攻略，希望对你有所帮助。